Jest 是一个非常流行的 JavaScript 测试框架，在 React 项目中使用 Jest 进行单元测试是非常常见的。不过，在实际使用中，我们经常会遇到一些问题。本文将介绍一些 Jest 中测试 React 组件时常见的问题，并提供相应的解决方案。
问题一：某些组件测试无法通过
通常，Jest 中测试 React 组件时，我们可以使用 enzyme 套件来帮助我们进行测试。但是在特定情况下，某些组件测试却会失败，例如：
import React from 'react';
const Button = ({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
);
export default Button;对上述 Button 组件进行测试时，我们可以写出下面的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ---------- -- -- -
----- ------- - --------------------- -------------
------------------------------ -----------------
---
---------- ---- ------- -------- ---- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------------- -------------
--------------------------
---------------------------------------
---
---但是，这时候我们发现第一个测试用例无法通过，控制台输出类似于这样的错误信息：
Invariant Violation: Could not find "store" in the context of "Connect(Button)". 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(Button) in connect options.
解决方案：使用 react-testing-library 进行测试
react-testing-library 是一个轻量级的 React 测试工具，它与 Jest 和其它测试框架集成度极高。我们可以使用它来代替 enzyme 进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ---------- -- -- -
----- - --------- - - -------------------- -------------
----------------------- --------------------------
---
---------- ---- ------- -------- ---- --------- -- -- -
----- ----------- - ----------
----- - --------- - - -------------- --------------------------- -------------
-------------------------------- ------
---------------------------------------
---
---这时，我们可以发现所有的测试用例都能够正常通过了。
问题二：与 Redux 相关的组件测试无法通过
对于使用了 Redux 的 React 组件，我们仍然可以使用 enzyme 进行测试。但是，有时候我们的测试用例就算写得很正确，仍然会遇到一些奇怪的问题，导致测试无法通过，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ ------ ---- -----------
----- --------- - -------------------
---------------- --------- --------- -- ------- -- -- -
---------- ------ ----------- -- -- -
----- ------------ - - -- --- -- --
----- ----- - ------------------------
----- ------- - --------
--------- --------------
------------- -----------
-----------
--
----------------------------------
---
---这段代码中，我们在测试中使用了 Provider 和 Redux 的 mockStore 进行测试，但是我们却遇到了这样的错误：
console.error node_modules/react-dom/cjs/react-dom.development.js:506 Warning: Expected server HTML to contain a matching <div> in <div>.
解决方案：使用 react-redux 的 Testing Utilities 进行测试
如果你在测试 Redux 的组件时，遇到了这种问题，那么你可以尝试使用 react-redux 的 testing utilities。这些 utilities 可以帮助我们在测试中 mock Redux 相关的组件，并比较简单易懂。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ - -------- - ---- --------------
------ - ----------------- - ---- -------------------
------ - --------------- - ---- -------------------
------ --------------- ---- --------------------
----- --------- - --------------------
------------------------- --------- -- ------- -- -- -
--- ------ -------------------------- ----
------------- -- -
----- - --------------
---
---------- ------ ----------- -- -- -
----- - --------- - - -------
--------- --------------
---------------------- --------------------
-----------
--
----------------------- --------------------------
---
---------- -------- ------- ------ -- ------ ------- -- -- -
----- - --------- - - -------
--------- --------------
---------------------- --------------------
-----------
--
-------------------------------- ------
------------------------------------
- ----- -------------- -
---
---
---如上代码所示，我们是如何使用的呢？首先，我们创建了一个 mockStore 实例，然后在每个测试用例中生成一个新的实例。接着，我们使用了 render 函数进行渲染并进行断言。最后，我们通过 fireEvent 函数模拟用户事件的发起，并断言 Redux 的 actions 是否符合预期即可。
总结
在 Jest 与 React 进行单元测试时，我们可能会遇到各种各样的问题。本文总结了两种常见问题及解决方案，包括使用 react-testing-library 或 react-redux testing utilities。希望对大家在 React 项目中的单元测试有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab6cec48841e989474123b