在开发 React 应用时,Redux 是一个非常流行的状态管理库。Redux 的异步 action 对于处理网络请求和其他异步操作非常有用。但是,测试 Redux 异步 action 可能会让你感到困惑,因为异步操作涉及到时间的问题。在本文中,我们将介绍如何使用 Jest 和 Redux-mock-store 来测试 Redux 异步 action。
安装 Jest 和 Redux-mock-store
首先,我们需要安装 Jest 和 Redux-mock-store。可以使用以下命令进行安装:
--- ------- ---------- ---- ----------------
编写测试用例
我们将编写一个测试用例来测试一个异步的 Redux action。假设我们有一个名为 fetchData
的异步 action,它会从服务器获取数据并将其存储在 Redux store 中。以下是 fetchData
的代码:
------ ----- ---- -------- ------ ----- ------------------ - --------------------- ------ ----- ------------------ - --------------------- ------ ----- ------------------ - --------------------- ------ ----- ---------------- - -- -- -- ----- ------------------ --- ------ ----- ---------------- - ---- -- -- ----- ------------------- -------- ---- --- ------ ----- ---------------- - ----- -- -- ----- ------------------- -------- ----- --- ------ ----- --------- - -- -- - ------ -------- -- - ----------------------------- ------ ---------------------- -------------- -- - ------------------------------------------ -- ------------ -- - ------------------------------------------ --- -- --
我们将使用 Jest 和 Redux-mock-store 来测试 fetchData
函数。以下是测试用例的代码:
------ ------------------ ---- ------------------- ------ ----- ---- -------------- ------ ----- ---- -------- ------ - ------------------- ------------------- ------------------- ----------------- ----------------- ----------------- --------- - ---- -------------- ----- ----------- - -------- ----- --------- - -------------------------------- --------------------- -- -- - ----------- ------------------ ---- -------- ---- --- ---- ------ -- -- - ----- ---- - - ---- ----- -- ----- --------------- - - - ----- ------------------ -- - ----- ------------------- -------- ---- - -- ----- ----- - ----------- ----- ---- --- ----------------------------- ---- --- ------ ----------------------------------- -- - ---------------------------------------------------- --- --- ----------- ------------------ ---- -------- ---- --- -------- -- -- - ----- ----- - --- -------------- --------- ----- --------------- - - - ----- ------------------ -- - ----- ------------------- -------- ------------- - -- ----- ----- - ----------- ----- ---- --- ----------------------------------- ------ ----------------------------------- -- - ---------------------------------------------------- --- --- ---
在上面的代码中,我们创建了两个测试用例来测试 fetchData
函数的成功和失败情况。我们使用 configureMockStore
函数来创建一个模拟的 Redux store,并使用 axios.get.mockResolvedValue
和 axios.get.mockRejectedValue
来模拟异步操作。最后,我们使用 store.getActions()
来获取 store 中的 action,以便进行断言。
总结
在本文中,我们介绍了如何使用 Jest 和 Redux-mock-store 来测试 Redux 异步 action。我们编写了一个测试用例来测试一个异步的 Redux action,并使用模拟的 Redux store 和模拟的网络请求来模拟异步操作。这些技术可以帮助你更好地测试 Redux 应用程序,并确保你的代码质量和可靠性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/650ba3e595b1f8cacd5b4801