如何使用 Enzyme 测试 Redux 的 connected 组件-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Redux 管理应用状态已经成为了一种越来越流行的选择。然而，测试 Redux 的 connected 组件却是一件比较困难的事情。本文将介绍如何使用 Enzyme 测试 Redux 的 connected 组件，并提供详细的指导和示例代码，希望能对您有所帮助。

Enzyme 简介

Enzyme 是一个由 Airbnb 开发的 JavaScript 测试工具，它可以帮助我们轻松测试 React 组件。Enzyme 提供了三种测试组件的方式：shallow、mount 和 render。

shallow：只渲染当前组件，不会渲染子组件。适用于测试组件的行为，而不是渲染结果。
mount：渲染整个组件树，可以测试组件的生命周期方法和子组件。
render：使用真实的 DOM 渲染组件，适用于测试组件的渲染结果。

如何测试 Redux 的 connected 组件

Redux 的 connected 组件是通过 connect 方法生成的，它将组件和 Redux 的 store 连接起来，使组件可以访问 store 中的数据和方法。因此，测试 connected 组件需要模拟 store 和传递 props。

模拟 store

我们可以使用 redux-mock-store 模拟一个 Redux store，它可以帮助我们创建一个 store 并在测试中使用它。下面是一个示例代码：

// javascriptcn.com 代码示例
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

const initialState = {
  todos: [],
};
const store = mockStore(initialState);

传递 props

由于 connected 组件是通过 connect 方法生成的，因此我们需要模拟传递 props。我们可以使用 Provider 组件将模拟的 store 传递给 connected 组件。下面是一个示例代码：

import { Provider } from 'react-redux';

const wrapper = mount(
  <Provider store={store}>
    <ConnectedComponent />
  </Provider>,
);

测试组件行为

使用 Enzyme 的 shallow 方法可以测试组件的行为，如触发事件、调用方法等。下面是一个示例代码：

it('should dispatch an action on button click', () => {
  const wrapper = shallow(<ConnectedComponent store={store} />);
  wrapper.find('button').simulate('click');
  expect(store.getActions()).toEqual([{ type: 'ADD_TODO', payload: 'Test' }]);
});

测试组件渲染结果

使用 Enzyme 的 mount 或 render 方法可以测试组件的渲染结果。下面是一个示例代码：

it('should render the component with the correct props', () => {
  const wrapper = mount(
    <Provider store={store}>
      <ConnectedComponent />
    </Provider>,
  );
  expect(wrapper.find(ChildComponent).prop('todos')).toEqual([]);
});

总结

使用 Enzyme 测试 Redux 的 connected 组件需要模拟 store 和传递 props，并使用 Enzyme 的 shallow、mount 或 render 方法进行测试。希望本文能对您有所帮助。

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