在前端开发中，React 组件的测试是非常重要的一项工作。而在进行组件测试时，难免会涉及到组件的依赖，如何处理依赖注入的问题，是我们在测试中需要注意的一点。本文将介绍在 Jest 测试 React 组件时如何处理依赖注入的问题，并给出具体的示例代码。
什么是依赖注入？
依赖注入（Dependency Injection，缩写为 DI）是一种设计模式，它的主要思想是通过将依赖关系从代码中分离出来，在运行时动态地将依赖关系注入到组件中。简单来说，就是将组件需要的依赖关系实例化后，传递到组件中。
在 React 组件中，依赖注入可以通过 props 和 Context 等方式来实现。而在进行组件测试时，我们需要模拟这些依赖关系，以确保组件的功能正确性。
Jest 如何处理依赖注入？
在 Jest 中，我们可以通过模拟（mock）的方式来处理依赖注入。例如，我们有一个依赖于一个 HTTP 请求库的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
----- - -
----- -----
-------- ------
------ ----
-
------------------- -
--------------- -------- ---- ---
-----------------------------------------
--------- --
---------------
----- ---------
-------- -----
--
-
------------ --
---------------
------ --------------
-------- -----
--
--
-
-------- -
------ -
------------------ -
--------------------- -
---------------- -
----------- ------------------------ -
---------- -----------------------
--
-
-我们可以使用 Jest 提供的 mock 实现，来模拟 axios 库的请求，在测试中不会真正地发送请求，但又能使组件正常运行：
-- -------------------- ---- ------- ------ ----- ---- -------- ------------------- ----------------- ----- ---- -------------- -- -- - ----- ---- - ------- ----- -------- - - ----- ---- -- -------------------------------------- ----- ------- - -------------------- ---- ------------------ -------- ----- --- --------------------------------------- - - ------ ---
在这个例子中，我们使用 jest.mock 函数来模拟 axios 库。我们使用链式函数 mockResolvedValue 来模拟 axios.get 请求成功时返回的数据。由于我们并没有真正发送请求，因此可以简单地在测试中设置组件的 loading 状态为 false，以便测试组件的渲染结果。
使用 Context 进行依赖注入
在某些情况下，我们的组件可能需要依赖的数据在组件树的较深处，使用 props 传值显得很笨拙。这时，我们可以使用 React 内置的 Context 进行依赖注入。
例如，我们有一个需要获取用户信息的组件 UserComponent，其需要从数据源中请求数据。我们可以使用 Context 将数据源的引用传递给组件，以便组件可以根据得到的数据进行渲染：
// DataContext.js import React from 'react'; export const DataContext = React.createContext(null);
-- -------------------- ---- -------
-- ------
------ - ----------- - ---- ----------------
----- --- ------- --------------- -
----- - -
----- -----
-------- ------
------ ----
-
------------------- -
--------------- -------- ---- ---
-----------------------------------------
--------- --
---------------
----- ---------
-------- -----
--
-
------------ --
---------------
------ --------------
-------- -----
--
--
-
-------- -
------ -
--------------------- -------- ----- --------------- ---
-----
-------------- --
------
-----------------------
--
-
-在 App 组件中，我们使用 DataProvider.Provider 组件，设置数据源的引用为当前组件状态中的 data 属性。我们将 UserComponent 组件放在 Provider 组件内，以便最终把数据源的引用传递给 UserComponent。
-- -------------------- ---- -------
-- ----------------
------ ------ - ---------- - ---- --------
------ - ----------- - ---- ----------------
-------- --------------- -
----- - ---- - - ------------------------
------ -
-----
----- -- ------------ -------------------
------
--
-在 UserComponent 中，我们使用 useContext 拿到数据源的引用，然后根据得到的数据进行组件的渲染。
在 Jest 测试中，我们也可以使用 Context 进行依赖注入。在测试之前，我们可以使用 DataProvider.Provider 组件，注入一个指定的数据源引用。例如，在 UserComponent 组件测试中，我们可以注入一个包含了指定用户名的数据源：
-- -------------------- ---- -------
-- ---------------------
------ - ------ - ---- -------------------------
------ - ----------- - ---- ----------------
------ ------------- ---- ------------------
------------- --- ------- --------- -- -- -
----- ---- - - ----- ------ --
----- - --------- - - -------
--------------------- -------- ---- ---
-------------- --
-----------------------
--
------------------------- -----------------------------
---在这个例子中，我们使用 render 函数对 UserComponent 进行渲染，并通过 DataContext.Provider 组件将预置的数据源引用注入组件中。在测试中，我们期望组件可以正确地把数据源中的用户名渲染出来。
结论
在 Jest 测试 React 组件时，依赖注入是一个十分重要的方面。我们可以通过模拟或使用 Context 等方式，来实现依赖关系的注入。在测试时，我们希望能够全面覆盖组件的各个状态，以确保组件的功能正确性。同时，保证每个测试之间的独立性也是十分重要的，这有助于我们更快速地定位和解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67475ad9555db9718d0bc1c3