Enzyme 的 shallow 和 mount 使用指南-JavaScript中文网-JavaScript教程资源分享门户

如果你是一名前端开发工程师，那么一定有接触过 React，而 Enzyme 是 React 中最常用的测试工具之一。在 Enzyme 中，我们通常使用 shallow 和 mount 函数来测试 React 组件。接下来，我们将详细讲解这两个函数的使用方法，以及它们在测试中的深度和学习指导意义。

shallow 和 mount 的区别

首先，我们先来介绍一下 shallow 和 mount。

shallow

shallow 函数是 Enzyme 中最常用的函数之一。它用来测试只有一层嵌套的组件。当我们测试一个组件时，有时我们只需要测试组件本身，而不需要测试其子组件，而 shallow 就可以帮我们实现这一点。它能够很快的渲染出组件，并且不会渲染出子组件。

mount

mount 函数则是 Enzyme 中另一个常用的函数。与 shallow 不同，mount 可以测试组件及其所有子组件。它会将组件完全渲染出来，并返回一个包含整个渲染结果的 wrapper。

从上面的介绍可以看出，shallow 和 mount 的最大区别在于是否渲染出子组件。因此，我们需要根据自己的需要选择合适的函数进行测试。

如何使用 shallow 和 mount

现在，我们来看看如何使用 shallow 和 mount。

使用 shallow

首先，我们来看看 shallow 函数的使用方式。

安装 Enzyme

Enzyme 需要安装在项目中才能使用，可以使用 npm 或 yarn 安装：

npm install enzyme --save-dev

或

yarn add enzyme --dev

此外，还需要安装适配器来适配不同的 React 版本。适配器有很多种，可以根据自己的 React 版本来选择适配器。我们以 React 17 为例，安装适配器的命令如下：

npm install enzyme-adapter-react-17 --save-dev

安装完适配器后，我们需要在测试文件中导入 Enzyme 和适配器：

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

Enzyme.configure({ adapter: new Adapter() });

现在我们已经完成了 Enzyme 的安装和配置，接下来就可以使用 shallow 函数来测试组件了。

测试组件

在测试文件中，我们需要首先导入要测试的组件：

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

然后，使用 shallow 函数创建一个 wrapper，并传入要测试的组件：

it('renders without crashing', () => {
  shallow(<MyComponent />);
});

现在我们已经创建了一个 wrapper，但并没有做任何测试。我们可以继续使用 Enzyme 提供的方法来对组件进行测试。

例如，我们可以使用 find 方法查找 wrapper 内的元素，并对其进行验证：

it('renders a title', () => {
  const wrapper = shallow(<MyComponent />);
  const title = wrapper.find('h1');
  expect(title).toHaveLength(1);
  expect(title.text()).toEqual('Hello, World!');
});

上面的测试查找了 wrapper 内的 h1 元素并验证了元素的数量和文本内容。当我们在测试中需要对子组件进行验证时，就需要使用 mount 函数了。

使用 mount

接下来，我们来看看 mount 函数的使用方式。

安装 Enzyme 和适配器

与使用 shallow 函数相同，使用 mount 前需要先安装 Enzyme 和适配器。这里不再赘述。

测试组件

同样的，我们需要先导入要测试的组件和 mount 函数：

import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

然后，使用 mount 函数创建一个 wrapper，并传入要测试的组件：

it('renders without crashing', () => {
  mount(<MyComponent />);
});

与 shallow 不同的是，mount 会将组件以及所有子组件渲染出来，因此我们可以对子组件进行验证。

例如，我们可以使用 find 方法查找 wrapper 内的元素，并对其进行验证：

it('renders a title', () => {
  const wrapper = mount(<MyComponent />);
  const title = wrapper.find('h1');
  expect(title).toHaveLength(1);
  expect(title.text()).toEqual('Hello, World!');
});

与 shallow 函数相比，mount 函数更加复杂，因为它会渲染出多个子组件，会增加测试的复杂性。

总结

shallow 和 mount 是 Enzyme 最常用的函数之一，它们分别用来测试只有一层嵌套的组件和测试组件及其所有子组件。使用 Enzyme 可以帮助我们更好地测试 React 组件，确保代码的质量和稳定性。

在使用 Enzyme 进行测试时，我们需要先安装和配置好 Enzyme 和适配器，然后使用 shallow 或 mount 函数来创建 wrapper，对组件进行测试。

最后，我们需要注意，在测试过程中要尽量避免对状态和生命周期的测试，而应该专注于测试组件本身的渲染和交互行为。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646ef6e4968c7c53b0d58771