在开发前端项目时，Jest 是一个常用的测试框架，而 redux-thunk 则是 Redux 应用中常用的中间件，用于处理异步操作。在使用 Jest 进行单元测试时，我们经常需要模拟函数的返回值或处理函数中的参数，这也包括了 redux-thunk 中的 dispatch 参数。
为什么需要 mock dispatch 参数？
在 Redux 应用中，dispatch 是一个用于触发 action 并执行 reducer 的函数。当使用 redux-thunk 中间件时，dispatch 不仅可以触发同步的 action，还可以触发异步的 action，并在异步操作完成后再次调用 dispatch 函数。在测试阶段，我们需要确保测试代码能够正确地处理不同的 action 和相关数据，因此需要考虑如何 mock dispatch 函数及其参数。
如何 mock dispatch 的参数
一种解决办法是使用 Jest 提供的 spyOn 函数来监视并修改 dispatch 函数。通过对 dispatch 的监视，我们可以在测试函数中手动指定 dispatch 函数的参数，并验证相应的操作是否得到正确的响应。
下面是一个例子，展示了如何在 Jest 下 mock 掉 dispatch 参数：
-- -------------------- ---- ------- ------ ------------------ ---- ------------------- ------ ----- ---- -------------- ----- ----------- - -------- ----- --------- - -------------------------------- ----- ------------ - ---------- ----- -------- - -- -- ----- ------------------------------ ----- --------------- --- ----- ----- - -------------------- ------------------------ -- -- - ------ - ----------- ----- -------- ------- -- ------ -- -------- -- ------ ------ --- ---------- - -------------------- --------- --- - ------------- -- --- -------------- -------- ------ -- -- - ---------- ---- ------ -------- -------- -- -- - ----- ------------ - -- -- ---------- -- - ------ ---------- ----- ------------- --- -- ------ -------------------------------------- -- - ------------------------------------------- ----- ------------- -- --- --- ---展开代码
在这个例子中，我们通过使用 Jest 提供的 jest.fn() 函数来创建了一个指定接口的 mock dispatch 函数，并在测试用例中使用它来验证异步操作的执行结果。
总结
当需要测试 redux-thunk 中包含 dispatch 参数的异步操作时，在 Jest 测试环境下要想正确地 mock 掉这些参数需要按照以下步骤进行：
在测试文件中导入需要测试的 Redux Store
使用
configureMockStore函数创建一个mock的Store使用
jest.spyOn()函数监视 dispatch 方法使用 Jest 提供的语法糖
jest.mock()修改 Redux-thunk 的行为更新监视到的 dispatch 方法
确认是否切实发生状态变更，获取预期值
在完成这些步骤后，可以使用 Jest 来运行单元测试，该测试将会对 redux-thunk 的异步中间件和对应模块的全部代码执行完整的测试过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65290de97d4982a6ebba0d4a
