Enzyme 中 redux-mock-store 的使用方法

在前端开发中，测试是非常重要的一个环节。而对于使用 redux 管理状态的应用来说，测试就更加重要了。redux-mock-store 是一个非常好用的 redux store 模拟工具，可以帮助我们轻松地进行 redux 相关的测试。本文将介绍在 Enzyme 中使用 redux-mock-store 的方法。

安装

首先，我们需要安装 redux-mock-store 和 Enzyme：

npm install --save-dev redux-mock-store enzyme enzyme-adapter-react-16

其中，enzyme-adapter-react-16 是适用于 React 16 的 Enzyme 适配器。

使用

1. 配置 Enzyme

在测试文件中，我们需要先配置 Enzyme。在 src/setupTests.js 中添加以下代码：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

2. 创建模拟 store

我们可以使用 redux-mock-store 的 createStore 方法来创建一个模拟的 store。例如：

import configureMockStore from 'redux-mock-store';

const mockStore = configureMockStore();
const store = mockStore({ /* initial state */ });

其中，configureMockStore 方法可以接受一个对象作为初始状态。如果不需要初始状态，可以传入一个空对象。

3. 渲染组件

接着，我们可以使用 Enzyme 的 shallow 方法来渲染组件，并将模拟的 store 传递给组件。例如：

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

const wrapper = shallow(<MyComponent store={store} />);

4. 断言

最后，我们可以使用 Enzyme 的断言方法来进行测试。例如：

expect(wrapper.find('div').length).toBe(1);
expect(wrapper.props().myProp).toBe('myValue');
expect(store.getActions()).toEqual(expectedActions);

其中，getActions 方法可以获取 store 中的 action 数组，我们可以使用它来判断是否正确地触发了 action。

示例代码

下面是一个完整的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';
import MyComponent from './MyComponent';

const mockStore = configureMockStore();
const store = mockStore({ myProp: 'myValue' });

describe('MyComponent', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<MyComponent store={store} />);
  });

  it('should render correctly', () => {
    expect(wrapper.find('div').length).toBe(1);
    expect(wrapper.props().myProp).toBe('myValue');
  });

  it('should dispatch action correctly', () => {
    const expectedActions = [{ type: 'MY_ACTION' }];
    wrapper.props().onClick();
    expect(store.getActions()).toEqual(expectedActions);
  });
});

在这个示例中，我们测试了一个名为 MyComponent 的组件。我们首先创建了一个模拟的 store，并将其传递给组件。然后使用 Enzyme 的 shallow 方法渲染组件，并进行了两个测试，分别测试了组件的渲染和 action 的触发。

总结

使用 redux-mock-store 可以帮助我们轻松地进行 redux 相关的测试。在 Enzyme 中使用 redux-mock-store 也非常简单，只需要创建模拟的 store 并将其传递给组件即可。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655b57a5d2f5e1655d57eec1