redux-actions-assertions 是一个用于测试 Redux action creators 和 reducers 的 npm 包。它提供了一组方便的断言函数，用于验证 action creators 的输入和输出是否正确，以及 reducer 是否能够正确处理 action。下面详细介绍如何使用这个 npm 包。
安装
使用 npm 安装 redux-actions-assertions：
npm install redux-actions-assertions --save-dev
断言函数
redux-actions-assertions 提供了以下断言函数：
- expectToDispatchAction(actionCreator, expectedAction): 验证 action creator 的输出是否为指定的 action。
- expectToDispatchActions(actionCreator, expectedActions): 验证 action creator 的输出是否为指定的一组 action。
- expectToDispatchError(actionCreator, expectedError): 验证 action creator 是否会抛出指定的错误。
- expectReducer(initialState, reducer, actions, expectedState): 验证 reducer 是否能够正确处理一组 action，从而达到预期状态。
使用示例
验证 action creator 的输出是否为指定的 action
例如，我们有一个 action creator：
export const incrementCounter = (value) => ({
type: 'INCREMENT',
payload: value
})我们希望验证这个 action creator 在输入值为 3 时，输出的 action 是否为 { type: 'INCREMENT', payload: 3 }。代码如下：
-- -------------------- ---- -------
------ - ---------------------- - ---- --------------------------
------ - ---------------- - ---- -----------
-------------------------- ------ --------- -- -- -
---------- -------- --- ------- -------- -- -- -
---------------------------------------- -
----- ------------
-------- -
-----
--
--这个断言函数接收两个参数：action creator 函数和期望的 action 对象。它返回另一个函数，可以传递给 action creator，以验证输出是否与期望值相同。
验证 action creator 的输出是否为一组指定的 actions
假设我们有一个 action creator，能够同时输出两个 action：
-- -------------------- ---- -------
------ ----- ------- - ------ -- ---------- --------- -- -
----------
----- -------------------
-------- - ---- -
--
----------
----- -------------------
-------- - ---- -
--
-我们希望验证这个 action creator 在输入值为 'hello' 时，是否会依次输出两个指定的 action。代码如下：
-- -------------------- ---- -------
------ - ----------------------- - ---- --------------------------
------ - ------- - ---- -----------
----------------- ------ --------- -- -- -
---------- -------- --- ------- --------- -- -- -
-------------------------------- -
- ----- ------------------- -------- - ----- ------- - --
- ----- ------------------- -------- - ----- ------- - -
-----------
--
--这个断言函数接收两个参数：action creator 函数和一个由期望的 action 对象组成的数组。它返回另一个函数，可以传递给 action creator，以验证输出是否与期望值相同。
验证 action creator 是否会抛出指定的错误
假设我们有一个 action creator，能够抛出指定的错误：
export const fetchTodos = () => {
throw new Error('Network error')
}我们希望验证这个 action creator 是否会抛出指定的错误。代码如下：
import { expectToDispatchError } from 'redux-actions-assertions'
import { fetchTodos } from './actions'
describe('fetchTodos action creator', () => {
it('should throw a network error', () => {
expectToDispatchError(fetchTodos, new Error('Network error'))()
})
})这个断言函数接收两个参数：action creator 函数和期望抛出的错误。它返回另一个函数，可以传递给 action creator，以验证是否会抛出指定的错误。
验证 reducer 是否能够正确处理 action
假设我们有一个 reducer：
const todosReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload]
default:
return state
}
}我们希望验证这个 reducer 在处理一组 action 后，能够达到预期的状态。代码如下：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
------ ------------ ---- ------------
------------------------ -- -- -
---------- ------ -------- -------- -- -- -
----- ------------ - --
----- ------- - -
- ----- ----------- -------- ------- --
- ----- ----------- -------- ------- -
-
----- ------------- - --------- --------
--------------------------- ------------- -------- --------------
--
--这个断言函数接收四个参数：初始状态、reducer 函数、一组 action 和期望的状态。它会依次处理每个 action，直到最终状态与期望状态相同。
结语
redux-actions-assertions 是一个方便的 npm 包，能够帮助开发者编写更加可靠的 Redux 测试代码。希望本文能够对你的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c49