介绍
在前端开发中，测试是一个必不可少的环节。而对于 React 应用来说，测试就显得更为重要了，因为组件化开发模式的特点使得整个应用的稳定性与可维护性很大程度上依赖于组件本身的稳定性。
Enzyme 是 React 官方提供的一个测试工具库，可以方便地测试 React 组件，包括对组件的状态 (state)、属性 (props) 和渲染结果 (render output) 的检查，以及组件实例的交互行为 (interaction) 的模拟等。
但是，对于 Redux-connected 组件来说，使用 Enzyme 测试并不是那么简单的一件事情，因为它与 Redux Store 的连接可能会影响组件的渲染结果，从而产生一些意外的结果。因此，在本文中，我们将会介绍如何使用 Enzyme 测试 Redux-connected 组件，并给出一些注意事项和示例代码，希望对读者有所帮助。
具体步骤
安装依赖
首先，我们需要在项目中安装 enzyme 和 enzyme-adapter-react-16 这两个库。
npm install --save-dev enzyme enzyme-adapter-react-16
同时，如果您在项目中使用了 react-redux 和 redux，您还需要安装 redux-mock-store 以便于模拟 Redux Store。
npm install --save-dev redux-mock-store
配置 Enzyme
在使用 Enzyme 前，我们需要对其进行配置。
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这里我们新建了一个名为 setupTests.js 的文件，并在其中进行了配置。configure 方法需要传入一个适配器 (adapter)，用于适配当前项目中使用的 React 版本。
编写测试
假设我们有一个名为 Counter 的计数器组件，它使用了 Redux Store 来管理状态。那么，我们将如何使用 Enzyme 测试它呢？
首先，我们需要编写一个名为 Counter.test.js 的测试文件。在文件中，我们需要引入测试工具库和需要测试的组件，同时模拟 Redux Store。
// javascriptcn.com 代码示例
// src/components/Counter.test.js
import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';
import Counter from './Counter';
const mockStore = configureMockStore([]);
describe('Counter component', () => {
let store, wrapper;
beforeEach(() => {
store = mockStore({ count: 0 });
wrapper = shallow(<Counter store={store} />);
});
it('should render the component', () => {
expect(wrapper.find('.counter')).toHaveLength(1);
});
it('should increment the count when the increment button is clicked', () => {
wrapper.find('.increment').simulate('click');
expect(wrapper.find('.count-value').text()).toEqual('1');
});
it('should decrement the count when the decrement button is clicked', () => {
wrapper.find('.decrement').simulate('click');
expect(wrapper.find('.count-value').text()).toEqual('-1');
});
});然后，我们通过 configureMockStore 创建了一个空的 Redux Store 并将其传入组件中，这样组件就可以正确地获取 Store 中的状态了。同时，我们使用了 shallow 方法创建了组件的浅层渲染 (shallow rendering) 并进行了相关的测试。
需要注意的是，在测试中我们不应该直接访问 Redux Store 中的数据，而是应该模拟用户与组件之间的交互行为，从而简化测试用例。比如，在上面的代码中我们模拟了点击按钮来增加或减少计数器值。
其他注意事项
在使用 Enzyme 测试 Redux-connected 组件时，我们还需要注意以下事项：
需要在测试文件的最上面引入
setupTests.js文件，以对 Enzyme 进行全局配置。需要使用
configureMockStore方法创建一个模拟的 Redux Store，并将其传入被测试的 Redux-connected 组件中。需要使用
mount方法而不是shallow方法来进行组件的渲染和测试。因为shallow方法只会渲染组件的顶层元素 (top-level element)，而不会触发完整的渲染过程，从而可能导致组件无法正确获取 Store 中的状态。在编写测试用例时，应该尽量避免直接访问 Redux Store 中的数据，而是应该模拟用户与组件之间的交互行为，从而简化测试用例。
具体示例
在本例中，我们使用了一个名为 Counter 的计数器组件作为示例，它使用了 Redux Store 来管理状态。以下为 Counter 组件的代码：
// javascriptcn.com 代码示例
// src/components/Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../actions/counter';
const Counter = ({ count, increment, decrement }) => (
<div className="counter">
<h2>Count: <span className="count-value">{count}</span></h2>
<button className="increment" onClick={() => increment()}>+</button>
<button className="decrement" onClick={() => decrement()}>-</button>
</div>
);
const mapStateToProps = state => ({
count: state.count
});
const mapDispatchToProps = {
increment,
decrement
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);我们也定义了 increment 和 decrement 两个 action，用于增加或减少计数器的值。
// src/actions/counter.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });在测试过程中，我们需要编写名为 Counter.test.js 的测试文件。以下为 Counter.test.js 文件的代码：
// javascriptcn.com 代码示例
// src/components/Counter.test.js
import React from 'react';
import { mount } from 'enzyme';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import Counter from './Counter';
const mockStore = configureMockStore([]);
describe('Counter component', () => {
let store, wrapper;
beforeEach(() => {
store = mockStore({ count: 0 });
wrapper = mount(<Provider store={store}><Counter /></Provider>);
});
afterEach(() => {
wrapper.unmount();
});
it('should render the component', () => {
expect(wrapper.find('.counter')).toHaveLength(1);
});
it('should increment the count when the increment button is clicked', () => {
wrapper.find('.increment').simulate('click');
expect(wrapper.find('.count-value').text()).toEqual('1');
});
it('should decrement the count when the decrement button is clicked', () => {
wrapper.find('.decrement').simulate('click');
expect(wrapper.find('.count-value').text()).toEqual('-1');
});
});这里我们使用了 mount 方法来进行组件的完整渲染，并使用了 Provider 组件将模拟的 Redux Store 传递给 Counter 组件。
总结
在本文中，我们介绍了如何使用 Enzyme 测试 Redux-connected 组件，并给出了配置 Enzyme、编写测试用例和注意事项等相关信息。需要注意的是，在测试过程中我们需要模拟用户与组件之间的交互行为，从而简化测试用例。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653119a77d4982a6eb2b531b