Jest 测试 React 组件：如何 Mock Store？-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一种流行的 JavaScript 测试框架，使用它可以轻松地为 React 组件编写测试。但是，当涉及到测试需要访问 Redux 存储的 React 组件时，我们需要考虑如何创建一个 mock store。在本文中，我们将更深入地了解 Jest 测试 React 组件中 mock store 的用法。

安装 Jest

首先，确保安装了 Jest。在项目根目录下运行以下命令安装 Jest：

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react react-test-renderer redux-mock-store

其中，redux-mock-store 是我们要使用的一个模拟 Redux 存储的库。

创建 Mock Store

要模拟 Redux 存储，我们需要使用 redux-mock-store 库。我们将创建一个 mock store 并将其传递给我们要测试的组件。假如我们要测试的组件 Component 有以下 mapStateToProps 和 mapDispatchToProps：

const mapStateToProps = (state) => ({
  count: state.count,
});
const mapDispatchToProps = {
  increment,
  decrement,
};

我们可以使用 createMockStore 函数来创建 mock store，如下所示：

import configureStore from 'redux-mock-store';

const middlewares = [];
const mockStore = configureStore(middlewares);
const initialState = { count: 0 };
const store = mockStore(initialState);

在这个例子中，我们定义了一个中间件数组，然后通过 configureStore 函数创建了一个 Redux 存储的 mock。我们还定义了一个 initial state 对象，其中包含一个 count 属性，然后将 mock store 初始化为 initialState。

在测试中使用 mock store

完成 mock store 后，我们可以将其传递给我们要测试的组件的 props 中。在这里，我们将其传递给 Component 组件的 props：

it('renders with count prop from store', () => {
  const wrapper = shallow(<Component />, {
    context: { store },
  });
  expect(wrapper.props().count).toBe(initialState.count);
});

在这个测试中，我们通过 shallow 函数渲染了 Component 组件，并使用 context 选项将 mock store 传递给了组件的 props。

现在，我们可以通过 wrapper.props().count 获取组件的 count 属性，并将其与初始状态 initialState.count 进行比较以进行测试。

模拟 Redux 动作

我们还可以使用 mock store 来模拟 Redux 动作。让我们为组件 Component 编写一个测试，以确保它可以正确地处理 INCREMENT 动作：

it('dispatches the increment action', () => {
  const wrapper = shallow(<Component />, {
    context: { store },
  });
  wrapper.props().increment();
  expect(store.getActions()).toEqual([{ type: 'INCREMENT' }]);
});

在这个测试中，我们调用了组件的 increment 方法，在这个方法中会触发 INCREMENT 动作。通过使用 store.getActions 方法可以获取 mock store 中的所有 Redux 动作。我们还将预期的结果与 { type: 'INCREMENT' } 进行比较，以确保组件正确地响应了 INCREMENT 动作。

总结

在 Jest 测试 React 组件中，我们可以使用 redux-mock-store 库来创建 mock store。我们创建了一个 mock store，并将其传递给了我们要测试的组件。我们还演示了如何模拟 Redux 动作，以测试组件是否会正确地响应它们。

Mock store 提供了一个强大的测试工具，可以模拟 Redux 存储，使我们能够编写更全面的测试用例。希望这篇文章对你有所帮助！

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