使用 Enzyme 测试 React 组件中的子组件

在 React 开发中，我们通常需要测试组件的行为和输出是否符合预期。而当组件中包含子组件时，测试起来就会变得更加复杂。这时，我们可以使用 Enzyme 这个测试工具来帮助我们更轻松地测试 React 组件中的子组件。

Enzyme 的基本使用

首先，我们需要安装 Enzyme：

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

然后，可以在测试文件中引入 Enzyme 和 React：

import { shallow, mount, render } from 'enzyme';
import React from 'react';

Enzyme 提供了三种渲染方式：shallow、mount 和 render。其中，shallow 只渲染当前组件，而不会递归渲染子组件；mount 则完整地渲染组件及其子组件；render 与 mount 类似，但返回的是静态 HTML 字符串，适用于服务端渲染测试。

我们可以使用 shallow 来测试一个简单的组件：

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

这里，<MyComponent /> 是一个待测试的 React 组件。shallow 方法会将这个组件渲染出来，然后返回一个 Enzyme 的 Wrapper 对象，我们可以在这个对象上面调用 find 方法来查找组件中的元素，或者使用 debug 方法来打印输出。

测试子组件

假设我们有一个组件 ParentComponent，它包含了一个子组件 ChildComponent，我们现在需要测试 ChildComponent 是否正常工作，我们可以在 ParentComponent 的测试文件中编写如下测试用例：

describe('ParentComponent', () => {
  it('should render ChildComponent correctly', () => {
    const wrapper = shallow(<ParentComponent />);
    expect(wrapper.find(ChildComponent)).toHaveLength(1);
  });
});

这里，我们首先使用 shallow 方法渲染 ParentComponent，然后使用 find 方法查找 ChildComponent，并断言返回的 Wrapper 对象数组长度为 1。

如果我们需要测试更深层次的子组件，可以递归使用 find 方法：

describe('ParentComponent', () => {
  it('should render GrandChildComponent correctly', () => {
    const wrapper = shallow(<ParentComponent />);
    const childWrapper = wrapper.find(ChildComponent);
    expect(childWrapper.find(GrandChildComponent)).toHaveLength(1);
  });
});

这里，我们首先使用 find 方法找到 ChildComponent 的 Wrapper 对象，然后在这个 Wrapper 对象上再次调用 find 方法查找 GrandChildComponent。

测试子组件的行为

有时，我们不仅需要测试子组件是否渲染正确，还需要测试子组件的行为是否符合预期。此时，可以通过 props 属性来间接地测试子组件的行为。

以一个简单的计数器组件为例：

function Counter({ count, onIncrement }) {
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

我们可以在父组件中定义一个测试用例，模拟子组件的某些行为：

describe('ParentComponent', () => {
  it('should increment the count when clicking the button', () => {
    const onIncrement = jest.fn();
    const wrapper = mount(<ParentComponent />);
    wrapper.find(Counter).prop('onIncrement')();
    expect(onIncrement).toHaveBeenCalled();
  });
});

这里，我们首先使用 mount 方法渲染 ParentComponent，然后使用 find 方法找到 Counter 组件的 Wrapper 对象，再取出其 onIncrement 属性并调用它。

除了使用 props 属性，我们还可以使用 Enzyme 的模拟器（Simulator）来模拟子组件的行为。比如，模拟点击 <button> 元素：

describe('ParentComponent', () => {
  it('should increment the count when clicking the button', () => {
    const wrapper = mount(<ParentComponent />);
    wrapper.find('button').simulate('click');
    expect(wrapper.find('div').text()).toContain('Count: 1');
  });
});

这里，我们首先使用 mount 方法渲染 ParentComponent，然后使用 find 方法找到 <button> 元素的 Wrapper 对象，并调用 simulate 方法模拟点击事件。最后，我们在 Wrapper 对象上使用 text 方法获取元素内容，断言包含 Count: 1。

结语

Enzyme 是一个非常实用的 React 测试工具，它提供了丰富的 API 来测试 React 组件及其子组件。但是，应该注意避免过度依赖 Enzyme，过度测试可能会增加维护成本。最好的实践是在代码编写过程中就遵循单一职责和可测试性原则，同时使用测试工具来增强代码可靠性和可维护性。

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