在前端开发中，我们经常使用 Jest 进行单元测试。而在进行 Redux 相关的单元测试时，集成 Redux DevTools 可以更好的帮助我们进行调试。但是，在有些情况下，我们会发现 Jest 集成 Redux DevTools 并不显示调试信息，这该怎么办呢？
问题分析
在集成 Redux DevTools 后，我们可以通过 window.__REDUX_DEVTOOLS_EXTENSION__.connect() 方法连接 Redux DevTools，然后通过 store.subscribe() 方法监听 Redux Store 的变化，并将变化信息发送给 Redux DevTools 进行调试。但是，在 Jest 中，由于没有浏览器环境，我们无法使用 window.__REDUX_DEVTOOLS_EXTENSION__，所以就会出现无法显示调试信息的现象。
解决方案
为了解决这个问题，我们需要使用第三方库 redux-devtools-extension。这个库提供了一组用于调试 Redux 的工具，其中就包括了 Jest 的支持。
安装依赖
首先，我们需要安装 redux-devtools-extension：
--- ------- ---------- ------------------------
集成 Redux DevTools
在测试文件中，我们需要使用 redux-devtools-extension 的 composeWithDevTools() 方法来集成 Redux DevTools：
------ - ----------- - ---- -------- ------ - ------------------- - ---- --------------------------- ----- -------- - ---------------------- ----- ----- - -------------------- ----------
这里的 enhancer 是用于增强 Store 的函数，我们将 composeWithDevTools() 的返回值传入 createStore() 方法中即可。
配置 Jest
为了让 Jest 支持 Redux DevTools，我们需要在 Jest 的配置文件中添加以下代码：
-------------- - - -- --- ----------- -------------------------------- -- --- --
在 setupTests.js 文件中，我们需要引入 redux-devtools-extension：
------ - ------------------- - ---- ---------------------------
----------------------------------- - -
-------- -- -- -
------ -
----- -- -- ---
---------- -- -- ---
----- -- -- ---
--
--
----------- -- -- ---
--
------------------------------------------ - ------------------------这里的 global 是 Jest 提供的全局变量，我们可以在其中定义全局变量，使其在测试中也能被访问到。在这里，我们定义了 __REDUX_DEVTOOLS_EXTENSION__ 和 window.__REDUX_DEVTOOLS_EXTENSION__，并使用 composeWithDevTools() 方法来初始化。
示例代码
下面是一个使用 redux-devtools-extension 的示例代码：
------ - ----------- - ---- --------
------ - ------------------- - ---- ---------------------------
----- -------- - -----------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ---------
------ ---------- ----------------
--------
------ ------
-
--
----- -------- - ----------------------
----- ----- - -------------------- ----------
--------- ------ -- -- -
---------------- ----- --------- -------- ---- ----- ---
-------------------------------------- --------
---总结
通过使用 redux-devtools-extension，我们可以在 Jest 中集成 Redux DevTools，并进行调试。这个库提供了一组用于调试 Redux 的工具，可以极大地提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66112971d10417a2221d7473