如何使用 Enzyme 测试 Redux 的组件

在前端开发中，Redux 是一个非常流行的状态管理库，但是如何测试 Redux 的组件呢？这就需要用到 Enzyme 这个 React 组件测试工具了。

Enzyme 是什么？

Enzyme 是一个 React 组件测试工具库，由 Airbnb 开发和维护。Enzyme 提供了一组使用简单的 API，用于测试 React 组件的属性、状态和元素渲染等内容，可轻松测试组件的交互和行为。

Enzyme 安装

在使用 Enzyme 进行测试之前，需要先安装和配置 Enzyme：

1. 安装 Enzyme：npm install --save-dev enzyme enzyme-adapter-react-16
2. 配置 Enzyme：在项目根目录创建 jest.config.js 文件，并添加以下代码：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']
}

再在 src 目录下创建 setupTests.js 文件，并添加以下代码：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

至此，Enzyme 安装和配置完成。

Enzyme 测试 Redux 的组件

现在，我们以简单的计数器组件为例，介绍如何使用 Enzyme 测试 Redux 的组件。

计数器组件

首先，我们需要编写一个计数器组件，包含加、减和重置功能：

// www.javascriptcn.com code example
import React from 'react';
import { connect } from 'react-redux';

import { increment, decrement, reset } from './redux/actions';

const Counter = ({ count, increment, decrement, reset }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={() => increment()}>+</button>
    <button onClick={() => decrement()}>-</button>
    <button onClick={() => reset()}>Reset</button>
  </div>
);

const mapStateToProps = (state) => ({ count: state });

export default connect(mapStateToProps, { increment, decrement, reset })(Counter);

其中，increment、decrement 和 reset 函数分别对应 Redux store 中的 INCREMENT、DECREMENT 和 RESET action。

测试计数器组件

接下来，我们利用 Enzyme 编写测试用例。在 src 目录下创建 Counter.test.js 文件，并添加以下代码：

// www.javascriptcn.com code example
import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';

import Counter from './Counter';
import { increment, decrement, reset } from './redux/actions';

const mockStore = configureMockStore();
const store = mockStore(0);

describe('<Counter />', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Counter store={store} />).dive().dive();
  });

  it('renders count', () => {
    expect(wrapper.find('h1').text()).toEqual('0');
  });

  it('renders increment button', () => {
    expect(wrapper.find('button').at(0).text()).toEqual('+');
  });

  it('renders decrement button', () => {
    expect(wrapper.find('button').at(1).text()).toEqual('-');
  });

  it('renders reset button', () => {
    expect(wrapper.find('button').at(2).text()).toEqual('Reset');
  });

  it('increments count on button click', () => {
    wrapper.find('button').at(0).simulate('click');
    expect(store.getActions()).toEqual([increment()]);
  });

  it('decrements count on button click', () => {
    wrapper.find('button').at(1).simulate('click');
    expect(store.getActions()).toEqual([decrement()]);
  });

  it('resets count on button click', () => {
    wrapper.find('button').at(2).simulate('click');
    expect(store.getActions()).toEqual([reset()]);
  });
});

该测试用例包括七个测试点：

1. 测试组件是否正确渲染计数器的值。
2. 测试组件是否正确渲染加号按钮。
3. 测试组件是否正确渲染减号按钮。
4. 测试组件是否正确渲染重置按钮。
5. 测试单击加号按钮是否正确增加计数器的值。
6. 测试单击减号按钮是否正确减少计数器的值。
7. 测试单击重置按钮是否正确重置计数器的值。

需要注意的是，这里我们使用 shallow 函数进行浅渲染，然后使用 dive 函数分别进入一层层的子组件。这是因为我们使用 Redux 进行状态管理，需要从 Provider 组件中获取 Redux store，并将组件层层传递下去。

另外，为了模拟 Redux store 的状态，我们使用 redux-mock-store 库创建一个虚拟的 Redux store，并在 Counter 组件中传入。

至此，我们就成功使用 Enzyme 进行了 Redux 组件的测试。测试用例覆盖了组件渲染和交互的多个方面，确保了组件在不同情况下的正确表现。

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