在前端开发中，我们经常会使用到 redux、mobx、vuex 等状态管理库来管理数据流，而 reducer 是这些状态管理库中非常重要的一环。在单元测试中，测试 reducer 是非常必要的，有了测试，我们可以保证代码质量，减少 bug，提高开发效率。而 npm 上有一个非常好用的测试 reducer 的包——test-reducer，本文将介绍如何使用它来测试 reducer。
安装
安装 test-reducer 的命令如下：
npm i test-reducer --save-dev
使用
test-reducer 提供了一个名为 testReducer 的函数来测试 reducer，它的基本使用方式如下：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
-------------------- -- -- -
------------------- -- -- -
---------- -- ----------- -- -- -
-------------------- -------------
--------- ----- -------------- -------- ------- --
---------------- -- --- ----- -- --
------
--
--
--testReducer 接收两个参数：reducer 和 initialState，然后我们通过 .expect 来输入一个 action，期望 reducer 处理后返回的 state 和 .toReturnState 中预期的 state 是否一致，最后通过 .run 来执行测试。
输入 action
.expect 用来输入 action，格式如下：
expect({ type: 'ACTION_TYPE', payload: 'VALUE' })其中，action.type 是必选项，表示 action 的类型，action.payload 是可选项，表示 action 的负载数据。
预期的 state
.toReturnState 用来预期 reducer 执行后返回的 state，格式如下：
.toReturnState({ /* 预期的 state */ })run 执行测试
最后通过 .run 来执行测试：
.run()
注意，在输入多个 action 做测试时，每个 .expect 和 .toReturnState 需要有对应的 .run 来执行测试。
示例代码
下面我们来看一个具体的示例，测试一个加法的 reducer。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
-- -------
-------- ------------- - - ------ - -- ------- -
------ ------------- -
---- ------
------ - ------ ----------- - -------------- --
--------
------ ------
-
-
-- --
-------------------- -- -- -
------------------- -- -- -
---------- -- ----- -- -- -
-------------------- - ------ - --
--------- ----- ------ -------- - --
---------------- ------ - --
------
-------------------- - ------ - --
--------- ----- ------ -------- - --
---------------- ------ - --
------
--
--
--这个示例测试了两个 action：第一个 action 期望执行后 state 的 count 等于 2，第二个 action 期望执行后 state 的 count 等于 8。
意义和指导
test-reducer 可以帮助我们写更简单、更高效、更可靠的单元测试，并可以保证代码质量，减少 bug，提高开发效率。单元测试是代码开发过程中必不可少的环节，所以熟练掌握 test-reducer 的使用方法对前端开发者来说是非常有意义和指导性的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3f81e8991b448db0cb