了解 React 测试工具 Enzyme：优秀的组件测试工具-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是不可或缺的一部分。针对 React 组件的测试工具也逐渐得到了广泛的应用。其中，Enzyme 是最受欢迎的一种组件测试工具，它提供了多种 API 和工具来确保 React 组件的正常运行。

Enzyme 是什么？

Enzyme 是 Airbnb 开发的一个开源 JavaScript 测试实用程序库，用于测试 React 组件的渲染和交互。它提供了一组 API 和工具，用于测试组件的行为：

渲染组件
模拟交互和操作
检查组件状态和属性

Enzyme 的使用非常简单。您可以轻松地下载和安装它，然后使用它的 API 和方法进行测试。

安装 Enzyme

要在项目中使用 Enzyme，您需要首先安装它。您可以使用 npm 包管理器来安装 Enzyme，只需运行以下命令：

npm install --save-dev enzyme

在 React 项目中使用 Enzyme

在项目中使用 Enzyme 很简单。只需在测试文件中导入 Enzyme 的 API 并使用它们即可。以下是导入 Enzyme 的代码示例：

import { shallow, mount, render } from 'enzyme';
import MyComponent from './MyComponent';

然后，您可以使用 Enzyme 的 API 来测试组件。以下是使用 Enzyme 测试组件的示例代码：

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

这个测试用例测试了一个简单的组件，创建了一个适当的 Enzyme 实例、加载了组件并对其进行快照测试。如果组件发生变化，测试将无法通过，因为快照就无法匹配。

Enzyme 的 API

Enzyme 有三个方法，可以用来渲染组件：shallow、mount 和 render。

1. shallow()

shallow() 方法渲染的组件是一个代理，它只包含组件的当前层级，而不是整个组件树。这使得它非常适合测试组件的行为。例如，当您测试组件的状态或属性时，您只需要渲染一个浅层组件就可以了。

以下是使用 shallow() 方法渲染组件的示例代码：

const wrapper = shallow(<MyComponent />);

2. mount()

mount() 方法是一个完整的渲染，将组件渲染为 HTML，并添加到真实 DOM 中。这种方法更加适合测试组件的交互和样式。

以下是使用 mount() 方法渲染组件的示例代码：

const wrapper = mount(<MyComponent />);

3. render()

render() 方法的渲染结果是一个普通的 HTML，而不是一个 React 组件。这使它非常适合测试组件的标记结构和样式。

以下是使用 render() 方法渲染组件的示例代码：

const wrapper = render(<MyComponent />);

使用 Enzyme 的断言

在组件开发中，一般会使用断言来验证组件的期望行为。Enzyme 提供了一组完整的断言方法，用于检查各种组件的属性和功能。

以下是 Enzyme 可用的一些断言：

1. expect(wrapper).to.have.lengthOf()

使用 expect(wrapper).to.have.lengthOf(1) 语句检查组件的渲染是否正确。

以下是使用 expect() 断言方法的示例代码：

describe('MyComponent', () => {
  it('should render a single div', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('div')).to.have.lengthOf(1);
  });
});

2. expect(wrapper).to.have.length()

使用 expect(wrapper).to.have.length(0) 语句检查组件是否完全卸载。

以下是使用 expect() 断言方法的示例代码：

describe('MyComponent', () => {
  it('should unmount', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.unmount();
    expect(wrapper).to.have.length(0);
  });
});

3. expect(wrapper).to.have.className()

使用 expect(wrapper).to.have.className('MyComponent') 语句检查组件是否具有正确的类名。

以下是使用 expect() 断言方法的示例代码：

describe('MyComponent', () => {
  it('should have the class name "MyComponent"', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.hasClass('MyComponent')).to.equal(true);
  });
});

4. expect(wrapper).to.have.prop()

使用 expect(wrapper).to.have.prop('disabled') 语句检查组件是否具有正确的属性。

以下是使用 expect() 断言方法的示例代码：

describe('MyComponent', () => {
  it('should have the disabled prop', () => {
    const wrapper = shallow(<MyComponent disabled />);
    expect(wrapper).to.have.prop('disabled');
  });
});

5. expect(wrapper).to.have.state()

使用 expect(wrapper).to.have.state('isOpen') 语句检查组件的状态是否正确。

以下是使用 expect() 断言方法的示例代码：

describe('MyComponent', () => {
  it('should have the state "isOpen"', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).to.have.state('isOpen', false);
  });
});

结论

在 React 组件测试方面，Enzyme 是最受欢迎和最优秀的测试工具之一。Enzyme 提供了各种方法和 API，以便我们可以有效地测试组件的行为、状态和属性。通过学习 Enzyme 的使用方法，我们可以更好地编写高质量的测试用例，并确保我们的 React 组件顺利运行并符合预期。

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