使用 Jest 测试 Redux 工具箱-JavaScript中文网-JavaScript教程资源分享门户

Redux 工具箱是一个强大的 Redux 增强工具，可以让 Redux 开发更加高效和简洁。然而，在开发过程中，为了确保代码的质量和稳定性，我们需要进行测试。本文将介绍如何使用 Jest 测试 Redux 工具箱。

在开始之前，我们需要确保安装了以下依赖项：

Jest
Redux
Redux 工具箱

如果还没有安装，请先执行以下命令进行安装：

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

创建一个简单的 Redux 工具箱

首先，让我们创建一个简单的 Redux 工具箱。我们将创建一个包含两个 action 和一个 reducer 的工具箱。

在 src 目录下创建一个 counterSlice.js 文件，内容如下：

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

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

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

createSlice 函数接受一个配置对象，包含四个属性：

name：工具箱的名称（字符串）。
initialState：状态的初始值。
reducers：一个对象，其中包含可用于更改状态的 action 的名称及其 reducer 函数。

在该文件中，我们定义了一个名为 counter 的工具箱，它包含两个 action：increment 和 decrement，以及一个 reducer，它根据每个 action 更新状态。

编写测试用例

现在，我们将创建一个测试用例来测试我们的工具箱是否按预期工作。在 src 目录下创建一个 counterSlice.test.js 文件，并编写如下测试用例：

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

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

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

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

在这个测试用例中，我们测试了三种情况：

undefined 的状态下，counterReducer 函数是否返回正确的默认值（0）。
INCREMENT action 是否能正确地增加状态的值。
DECREMENT action 是否能正确地减少状态的值。

运行测试

现在，我们已经编写了测试用例，接下来我们需要在终端中运行它。在 package.json 文件中添加以下脚本：

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

运行 npm run test 命令，Jest 将执行测试并输出测试结果：

- --- --- ----

- ----

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

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

可以看到，我们编写的测试用例已经全部通过了。

结论

在这篇文章中，我们学习了如何使用 Jest 测试 Redux 工具箱。我们创建了一个简单的工具箱，并编写了测试用例来测试其功能。使用这种方法，我们可以确保我们的 Redux 工具箱代码的质量和稳定性。

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