React 是一个流行的前端框架，许多项目都采用 React 来构建组件。而在进行组件开发的同时，我们也需要进行组件测试。在 Jest 中进行 React 组件渲染测试有许多方法，这篇文章主要介绍 9 种方法，并且给出相应的示例代码。
1. 根据组件名渲染组件
第一种方法是根据组件名来渲染组件，这种方式非常简单，只需要传入组件名即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- - --------- - - ------------------- ----
-----------------------------------------------
---
---2. 使用 Provider 包装组件
Provider 是 React 的一个组件，它可以包装其他组件。使用 Provider 可以方便地注入 props 或 context。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ - -------- - ---- --------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- - --------- - - -------
--------- -------- ---- ----- ---
------------ --
-----------
--
-----------------------------------------------
---
---3. 使用 Wrapper 包装组件
Wrapper 是一个工具，用于包装组件以在测试中进行更多的操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---4. 使用 Redux 提供的 Provider 包装组件
如果我们在组件中使用了 Redux，我们也可以使用 Redux 提供的 Provider 包装组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------ - ---- -------------------------
------ ----------- ---- ----------------
------ ------- ---- ------------
----------------------- -- -- -
--- ------
------------- -- -
----- - -------------------- -
---- ------
---
---
----------- ----------- -- -- -
----- - --------- - - -------
--------- --------------
------------ --
-----------
--
-----------------------------------------------
---
---5. 使用 Redux 提供的 connect 包装组件
除了使用 Provider 包装组件外，我们还可以使用 Redux 提供的 connect 函数包装组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------ - ---- -------------------------
------ - ------- - ---- --------------
------ ----------- ---- ----------------
------ ------- ---- ------------
----- --------------- - ------- -- --
---- ----------
---
----- -------------------- - --------------------------------------
----------------------- -- -- -
--- ------
------------- -- -
----- - -------------------- -
---- ------
---
---
----------- ----------- -- -- -
----- - --------- - - -------
--------- --------------
--------------------- --
-----------
--
-----------------------------------------------
---
---6. 使用 React Router 提供的 MemoryRouter 包装组件
如果我们在组件中使用了 React Router，我们可以使用 MemoryRouter 提供的 Router 包装组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ - ------------ - ---- -------------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- - --------- - - -------
------------- ---------------------------------
------------ --
---------------
--
-----------------------------------------------
---
---7. 使用 react-i18next 提供的 I18nextProvider 包装组件
如果我们在组件中使用了 i18n，我们可以使用 react-i18next 提供的 I18nextProvider 包装组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ - --------------- - ---- ----------------
------ ---- ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- - --------- - - -------
---------------- ------------
------------ --
------------------
--
-----------------------------------------------
---
---8. 使用 React 自带的 Suspense 包装组件
如果我们在组件中使用了 Suspense 进行代码分割，那么我们可以使用 React 自带的 Suspense 组件进行包装。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- - --------- - - -------
--------------- ---------------------------------
------------ --
-----------------
--
-----------------------------------------------
---
---9. 使用 React 自带的 lazy 和 Suspense 包装组件
与第 8 种方法相似，我们还可以使用 React 自带的 lazy 和 Suspense 组件进行代码分割和按需加载。
-- -------------------- ---- -------
------ ------ - ---- - ---- --------
------ - ------ - ---- -------------------------
----- ----------- - ------- -- -------------------------
----------------------- -- -- -
----------- ----------- -- -- -
----- - --------- - - -------
--------------- ---------------------------------
------------ --
-----------------
--
-----------------------------------------------
---
---以上就是在 Jest 中进行 React 组件渲染测试的 9 种方法。希望本文的介绍能够帮助你更好地进行 React 组件的测试。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67825946935627c900033f4f