介绍
在使用React编写应用程序时，React Context成为了一种非常流行的状态管理机制。然而，测试这些使用React Context状态的组件需要特殊的技术和工具。在本文中，我们将探讨如何使用Jest和React测试库来测试使用React context的组件，并解释如何在测试过程中Mock掉Context，以便测试更加可靠、可维护。
环境
在开始之前，我们得确保我们已经安装好了以下依赖项：
- react: 16.x
- react-dom:16.x
- react-testing-library:10.x
- jest:25.x
示例组件
让我们以一个简单的示例组件开始，它会使用React Context来获取当前的主题。然后，渲染一些内容并根据主题的类型切换类名。
-- -------------------- ---- -------
-- ---------------
------ - ------------- - ---- --------
----- ------------ - ---------------
------ -------
---
------ ------- -------------
-- --------------
------ ------ - ---------- - ---- --------
------ ------------ ---- -----------------
----- ----------- - ------- -- -
----- - ----- - - -------------------------
------ -
---- ------------------------ ------- --- ------ - ------------ - -----------------
----------------
------
--
--
------ ------- ------------如上所示，我们使用了 createContext() 方法来创建了一个 React context。然后，创建了一个 MyComponent 组件。组件在这里接收一个 prop，并将它传递给了组件内的子项。MyComponent 组件还从 ThemeContext 中获取了当前主题，并根据主题类型切换类名。
现在，我们将构建测试以检查组件根据传递给它的 prop 是否正常渲染内容，并在使用不同主题时将类名正确应用到组件。
测试组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ----------- ---- ----------------
------ ------------ ---- -----------------
----------------------- -- -- -
---------- ------ -------- ---------- -- -- -
----- - --------- - - -------
-------------
------- ---------
--------------
--
---------------------- -----------------------------
---
---------- ----- --- ------------- ----- ---- --- ----- -- --------- -- -- -
----- - --------- - - -------
---------------------- -------- ------ ------- ---
------------ --
------------------------
--
----------------------------------------------------------------------------
---
---------- ----- --- ------------ ----- ---- --- ----- -- -------- -- -- -
----- - --------- - - -------
---------------------- -------- ------ ------ ---
------------ --
------------------------
--
---------------------------------------------------------------------------
---
---如上所示，我们编写了三个测试用例来测试 MyComponent 组件。首先，我们测试组件是否正常渲染其子组件。接下来，我们测试当主题为 “light” 时，组件是否应用正确的样式类。最后，我们测试当主题为 “dark” 时，组件是否应用正确的样式类。
请注意，我们使用 <ThemeContext.Provider> 包装 <MyComponent>，将要测试的组件放入了 theme context 中。渲染后，我们使用 Jest 提供的 expect() API 来断言是否符合预期。所有测试都应该通过。
Mock 上下文
在测试已经通过的情况下，我们将进一步探索如何 Mock 上下文。我们需要做的是使用 Jest 内置的 mock 和 spy 功能来替换组件的 Context 值。让我们以前一个示例中的 MyComponent 组件为例。考虑以下测试情况：
-- -------------------- ---- -------
-------------- --- ---- -- ------ ---- -- -- -
------------- -- -
------------------------ -------------------------------
------ -------
---
---
------------ -- -
-----------------------
---
---------- ------- --- ------- ------- -- -- -
----- - --------- - - ------------------- ----
----- ----------- - ---------------- --------
----------------------------------------
---
---
在这个测试中，我们模拟了一个情况：当用户成功登录且主题为“light”时。在每个测试之前，我们都用 jest.spyOn() 方法创建了一个被替换的 ThemeContext.useContext() 方法，该方法将 mock 上下文挂钩到 HomeComponent 组件中。方法被恢复在 afterEach()。现在，我们可以编写过程性测试，以验证该组件正确反应了该上下文的状态。我们只需要验证组件中的文本是否正确。
结论
在本文中，我们介绍了使用 Jest 和 React 测试来检查使用 React Context的组件的方法。我们还演示了如何 Mock 上下文，以更深入地测试组件。请注意，React的应用有各种不同的状态管理解决方案。所以，每一种方案都有它特定的测试方法和需求。我们希望这篇文章能帮助您开始构建测试更高级的React组件，并为您提供技能进行下一次的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674966b8a1ce0063545c2e68