在前端应用开发中，Redux 已经成为了一个流行的状态管理工具。然而，Redux 的 reducer 函数需要经常保证其正确性，这就需要有一个好的测试框架来确保 reducer 编写正确。Mocha 是一个流行的 JavaScript 测试框架，对于 Redux reducer 的测试也提供了良好的支持，本文将详细介绍如何在 Mocha 测试中测试 redux reducer 的方法。
确定 reducer 的初始状态
为了测试 reducer 函数，我们需要首先确定初始状态，并定义一个 state 对象。这个 state 对象应该包含 reducer 所需的所有属性，并且需要在每个测试函数中初始化，以确保每个测试都是独立的。
举个例子：
const initialState = {
counter: 0,
user: {
loggedIn: false,
username: null
}
};编写 reducer 测试函数
下面我们开始编写 reducer 测试函数。针对每个 reducer，我们需要编写多个独立的测试函数，以覆盖所有可能的情况。
下面是一个 reducer 的例子：
-- -------------------- ---- -------
-------- --------------------- ------- -
------ ------------- -
---- ------------
------ ----------------- ------ - -------- ------------- - - ---
---- ------------
------ ----------------- ------ - -------- ------------- - - ---
--------
------ ------
-
-那么这个 reducer 对应的测试函数大概长这样：
-- -------------------- ---- -------
----------------- --------- -- -- -
----------- --- ------- ------- -- -- -
-------------------------------- -------------- -------- - ---
---
-------------- --- --------- -- -- -
-------
---------------- -------- - -- - ----- ----------- --
----------- -------- - ---
---
-------------- --- --------- -- -- -
-------
---------------- -------- - -- - ----- ----------- --
----------- -------- - ---
---
----------- --- ------- ----- -- --- ------ ---- -- --------- -- -- -
----- ----- - - -------- - --
---------------------------- - ----- --------- ----------------
---
---解析测试函数
在上一个代码示例中，我们分别对 reducer 函数的初始状态、增加计数器、减少计数器、处理未知类型时的行为进行测试。
第一个测试函数对于 reducer 函数的初始状态进行测试，这里我们可以通过 actions 中传入的一个空对象来触发 reducer 对象。
it("returns the initial state", () => {
expect(counterReducer(undefined, {})).toEqual({ counter: 0 });
});第二个测试函数测试了增加计数器的逻辑。这里我们可以先构造一个包含 counter 属性且初始值为 0 的状态对象，然后 dispatch 一个 INCREMENT action，最后通过 expect 断言得到的新状态对象的 counter 值是否是 1。
it("increments the counter", () => {
expect(
counterReducer({ counter: 0 }, { type: "INCREMENT" })
).toEqual({ counter: 1 });
});第三个测试函数测试了减少计数器的逻辑，实现方式类似于第二个测试函数。
it("decrements the counter", () => {
expect(
counterReducer({ counter: 1 }, { type: "DECREMENT" })
).toEqual({ counter: 0 });
});第四个测试函数测试了当 reducer 函数不处理某种 action 类型时返回上一个状态，这样我们就可以确信 reducer 函数不会破坏状态的完整性。
it("returns the current state if the action type is unknown", () => {
const state = { counter: 1 };
expect(counterReducer(state, { type: "unknown" })).toBe(state);
});结论
本文简单地介绍了如何使用 Mocha 编写 Redux reducer 的测试函数，并指导读者如何针对每个 reducer 编写与之相应的独立测试函数。希望这些经验可以帮助开发者编写更加健壮的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f9150ec5c563ced5c3db37