在 Jest 测试中使用 redux-mock-store 模拟 store 状态-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要对状态进行测试。而 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 的示例：

-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - --------- - ---- ------------

----- ----------- - --------
----- --------- - --------------------------------

--------------------- -- -- -
  ---------- -------- --- ------- --------- -- -- -
    ----- ------------ - ---
    ----- ----- - ------------------------

    ----- ---- - - --- -- ----- ----- ---- --
    ----- --------------- - -
      - ----- -------------------- --
      - ----- --------------------- -------- ---- --
    --

    ------ ------------------------------------ -- -
      ----------------------------------------------------
    ---
  ---
---

在这个示例中，我们测试了一个异步的 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