在 Jest 测试中使用 redux-mock-store 模拟 store 状态

前言

在前端开发中，我们经常需要对状态进行测试。而 redux 是一个非常流行的状态管理库，它可以帮助我们更好地组织和管理状态。在 Jest 测试中使用 redux-mock-store 模拟 store 状态，可以帮助我们更方便地测试 redux 相关的代码。

redux-mock-store

redux-mock-store 是一个用于测试 redux 相关代码的模拟 store，它可以帮助我们模拟 store 的状态，并提供一些方便的方法来测试 redux 相关代码的行为。

安装

redux-mock-store 可以通过 npm 安装：

npm install --save-dev redux-mock-store

使用

首先，我们需要创建一个 mock store：

import configureMockStore from 'redux-mock-store';

const mockStore = configureMockStore();

然后，我们可以使用 mock store 来模拟 store 的状态：

const initialState = { foo: 'bar' };
const store = mockStore(initialState);

现在，我们可以使用 store 中的方法来测试 redux 相关的代码了。

示例

下面是一个使用 redux-mock-store 的示例：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fetchUser } from './actions';

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

describe('fetchUser', () => {
  it('should dispatch the correct actions', () => {
    const initialState = {};
    const store = mockStore(initialState);

    const user = { id: 1, name: 'John Doe' };
    const expectedActions = [
      { type: 'FETCH_USER_REQUEST' },
      { type: 'FETCH_USER_SUCCESS', payload: user },
    ];

    return store.dispatch(fetchUser(1)).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

在这个示例中，我们测试了一个异步的 action fetchUser。我们使用了 redux-thunk 中间件来处理异步 action。我们创建了一个 mock store，并通过 dispatch 方法来触发 action。在 action 完成后，我们使用 store 中的 getActions 方法来获取 store 中的所有 action，并断言它们是否符合预期。

总结

在 Jest 测试中使用 redux-mock-store 可以帮助我们更方便地测试 redux 相关的代码。我们可以使用它来模拟 store 的状态，并提供一些方便的方法来测试 redux 相关代码的行为。希望这篇文章能够帮助你更好地理解如何使用 redux-mock-store 进行测试。

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