Enzyme 是一个流行的 React 测试工具，它可以通过模拟用户行为来测试 React 组件的行为。然而，在测试 Redux 项目时，我们可能会遇到一些报错问题。本文就来介绍如何解决 Enzyme 测试 Redux 项目报错的问题。
问题描述
通常情况下，我们会使用 mount 方法来渲染一些需要与 Redux 进行交互的组件，并在测试时模拟一些用户行为。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ --- ---- --------
----- --------- - -------------------
------------- ----------- -- -- -
--- ------
--- --------
------------- -- -
----- - -----------
----- -----
---
------- - ------
--------- --------------
---- --
-----------
--
---
---------- ------ ------- -------- -- -- -
----- ------------ - ------------------
------------------------------------
---
-- ----- ----- -- -------
---然而，我们运行这些测试时可能会抛出如下错误：
Invariant Violation: Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(MyComponent) in connect options.
at invariant (/path/to/project/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:16:9)
at Object.getStore (/path/to/project/node_modules/react-redux/es/components/connectGetStore.js:29:7)
at ConnectFunction (path/to/project/node_modules/react-redux/es/components/connectAdvanced.js:170:38)
at mount (path/to/project/node_modules/enzyme/src/mount.js:25:10)
at Object.<anonymous> (path/to/project/src/App.test.js:17:12)这是因为我们在测试时没有为 Provider 组件提供一个真正的 Redux store，从而导致 Redux 报错。
解决方法
解决这个问题的方法非常简单。我们只需要在测试时手动创建一个真正的 Redux store，并将其传递给 Provider 组件即可。我们可以使用 redux-mock-store 库来创建一个 mock 的 store，如下所示：
-- -------------------- ---- -------
------ -------------- ---- -------------------
----- --------- - -------------------
------------- ----------- -- -- -
--- ------
--- --------
------------- -- -
----- - -----------
----- -----
---
------- - ------
--------- --------------
---- --
-----------
--
---
-- ---
---这样就可以解决 Redux store 不存在的问题了。然而，在实际应用中，我们可能还需要测试异步 action 和 reducer 等内容。接下来，我们将分别介绍如何测试异步 action 和 reducer。
测试异步 action
有时候，我们会在 Redux action 中执行异步操作（例如调用 API）。在测试时，我们需要确保异步操作执行成功，并且正确地触发了相应的 action。
我们可以使用 redux-mock-store 库和 redux-thunk 中间件来测试异步 action。具体步骤如下：
安装
redux-mock-store和redux-thunk：npm install redux-mock-store redux-thunk --save-dev
创建一个 mock store：
import configureStore from 'redux-mock-store'; import thunk from 'redux-thunk'; const mockStore = configureStore([thunk]);
编写一个测试异步 action 的测试用例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------------- ---- ------------------- ------ ----- ---- -------------- ------ - --------- - ---- ---------------- ------------------- ----- --------- - ------------------------ ------------------- -------- -- -- - --- ------ ------------- -- - ----- - ------------ --- ---------- ----- ---- -------------- -- -- - ----- ---- - - --- -- ----- -------- -- ----- --------------- - - - ----- -------------------- -- - ----- --------------------- -------- ---- -- -- --------------------------------- ----- ---- --- ------ ----------------------------------- -- - ---------------------------------------------------- --- --- ---
这样，我们就可以测试异步 action 了。
测试 reducer
当我们的 Redux 应用变得更加复杂时，我们需要确保我们的 reducer 可以正确地处理各种情况。在编写 reducer 的测试用例时，我们需要考虑各种可能的状态以及输入和输出。
我们可以考虑使用 redux-actions 包的 handleActions 方法来自动生成 reducer，从而避免手动编写 reducer 的错误。下面是一个测试 reducer 的例子：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
------ - -------- --------- - ---- ----------------
----- ------------ - -
----- -----
--
----- ------- - --------------
-
---------- ------- ------- -- --
---------
----- ---------------
---
------------ ------- -- --
---------
----- -----
---
--
------------
--
----------------------- -- -- -
---------- --- ---- ----------- -- -- -
----- ---- - -
--- --
----- --------
--
----- ------ - --------------
----- -------- - --------------------- --------
------------------------------------
---
---------- ----- ---- ----------- -- -- -
----- ------ - ------------
----- -------- - --------- ----- -- -- --------
---------------------------------
---
---这个例子中，我们使用 handleActions 方法来生成 reducer，然后编写了两个测试用例来测试 setUser 和 clearUser 的行为。
总结
在本文中，我们介绍了如何解决 Enzyme 测试 Redux 项目报错的问题。我们还介绍了如何使用 redux-mock-store、redux-thunk 和 redux-actions 来测试异步 action 和 reducer。这些工具和方法可以帮助我们编写更好的 Redux 应用和更可靠的测试用例，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471565f968c7c53b0f398a0