在 React 开发中，我们经常需要使用 Jest 来测试组件。当我们测试一个组件时，有时需要 mock 组件中的 class，让测试变得更加简单。
在本文中，我们将介绍如何使用 Jest 来 mock React 组件中的 class，并提供示例代码。
了解 Jest
在开始之前，让我们先了解 Jest 简介。
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它使用了 Jasmine 的断言风格，提供了快照测试、mock、测试覆盖率等功能，致力于让代码的测试变得更加简单和易于维护。
如何 mock class？
现在，让我们来看看如何在 Jest 中 mock class。
假设我们有一个组件 MyComponent，它依赖于另一个组件 MyDependency，而 MyDependency 是一个 class，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
------------- --
------
--
-
-
------ ------- ------------在测试 MyComponent 时，我们需要 mock MyDependency，以避免测试对其产生影响。
首先，我们需要使用 jest.mock 函数来 mock MyDependency，代码如下所示：
jest.mock('./MyDependency', () => ({
__esModule: true,
default: jest.fn().mockImplementation(() => <div>Mocked MyDependency</div>),
}));在这个例子中，我们使用 jest.fn 函数来创建 MyDependency 的 mock 实现。这个 mock 实现只是简单地返回了一个 <div> 元素，该元素显示了一个文本“Mocked MyDependency”。
接下来，我们需要用这个 mock 组件来渲染 MyComponent，代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ------- ---------- -- -- -
----- --- - ------------------------------
---------------------------- --- -----
-------------------------------------
---
---在这个例子中，我们使用 ReactDOM.render 函数来渲染 MyComponent，然后使用 ReactDOM.unmountComponentAtNode 函数来卸载组件。通过这样的方式，我们可以测试 MyComponent 是否正常渲染，而不会受到 MyDependency 的影响。
实际用例
现在，让我们来看一个更实际的用例。假设我们有一个组件 UserList，它依赖于 UserService，而 UserService 是一个 class，用来获取用户信息，并返回一个 Promise。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - - ------ -- --
-
------------------- -
-----------------
-
----- ----------- -
----- ----------- - --- --------------
----- ----- - ----- -----------------------
--------------- ----- ---
-
-------- -
----- - ----- - - -----------
------ -
-----
----
--------------- -- -
--- ------------------------------
---
-----
------
--
-
-
------ ------- ---------现在，我们想要测试 UserList，但是我们需要 mock UserService，以避免对服务器产生影响。
首先，我们需要使用 jest.mock 函数来 mock UserService，代码如下所示：
-- -------------------- ---- -------
-------------------------- -- -- --
----------- -----
-------- ------------------------------- -- --
--------- -----------------------------
- --- -- ----- ------ --
- --- -- ----- ------ --
---
----
----在这个例子中，我们使用 jest.fn 函数来创建 UserService 的 mock 实现。这个 mock 实现返回了一个包含两个用户的数组。
接下来，我们需要用这个 mock 组件来渲染 UserList，代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- -------------
-------------------- -- -- -
----------- ------- ---------- -- -- -
----- --- - ------------------------------
------------------------- --- -----
-------------------------------------
---
---在这个例子中，我们使用 ReactDOM.render 函数来渲染 UserList，然后使用 ReactDOM.unmountComponentAtNode 函数来卸载组件。这样，我们可以测试 UserList 是否正常渲染，而不会受到 UserService 的影响。
总结
在本文中，我们介绍了如何在 Jest 中 mock React 组件中的 class。我们提供了示例代码，并讨论了一个实际用例。如果你想进一步了解 Jest，可以查看它的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ecfcd968c7c53b0102f2b