在前端开发中，测试是一个至关重要的部分。测试可以保证代码的质量、预测代码在应用中的表现、优化代码效率等。在 React 开发中，Jest 是一个广泛使用的测试框架，在测试 React 组件中尤其常用。但是，在测试组件时，有时可能会遇到下列情况：
组件依赖其他组件或库
组件依赖 Redux Store
针对以上情况，我们可以使用 Jest 的桩（Mock）功能来模拟组件和库。本文详细讲述了如何使用 Jest 模拟组件，旨在提供深入的学习和指导意义。
基本概念
在开始之前，我们需要了解 Jest 一些基本的概念。
测试用例
测试用例（Test case）是一组代码，用于执行某个特定行为并验证单元或系统是否按照预期工作。
测试套件
测试套件（Test suite）是一组测试用例的集合。
断言
断言（Assertion）是一种用于测试结果是否符合预期的方法。在 Jest 中，使用expect函数进行断言。
Mocking
Mocking 是一种行为，模拟和管理对象的方式。在 Jest 中，模拟是使用模拟（Mock）对象来替代实际对象，从而控制测试中的行为。
模拟组件
在以下示例中，我们将演示如何使用 Jest 模拟组件。在此之前，让我们创建一个名为Button.js的组件。该组件接受一个文本参数，并在页面上绘制一个按钮。这是代码：
import React from 'react';
const Button = ({text}) => {
return <button>{text}</button>;
}
export default Button;现在，我们来编写我们的第一个测试用例。我们想测试Button组件是否接受一个text属性，并在页面上呈现它。以下是测试代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ------ ---- ----------- ------------- ------ ------ -- -- - ----- ---------- - ------ ---- ----- - --------- - - -------------- ----------------- ---- ----- ------ - ---------------------- ----------------------------------- ---
在上面的代码中，我们使用render函数渲染Button组件，然后在渲染的 DOM（文档对象模型）中查找按钮文本。由于我们传递一个名为 buttonText 的文本属性，所以我们可以使用 getByText 函数来查找按钮组件中的文本。最后，我们使用断言检查按钮是否出现在页面上。
Mocking 组件
现在，假设Button组件没有显示正确的样式。在这种情况下，我们可以使用模拟（Mock）对象来测试组件是否正在与其渲染的子组件进行正确的通信。为此，我们可以使用 Jest 提供的 jest.mock() 函数。让我们看一下完整的代码示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ------ ---- ----------- ------ --------- ---- -------------- -- ---------- ------------------------ -- -- -- ---------- -- -- ---------------------- ---- ------------- ------ ---- ----------- -- -- - ----- ---------- - ------ ---- ----- - --------- - - -------------- ----------------- ---- ----- --------- - ----------------------- -------------------------------------- ---
在这个示例中，我们使用 jest.mock() 函数来模拟 TextField 组件并返回一个简单的测试组件。然后，我们测试 Button 组件是否正确与 TextField 子组件通信。我们使用 getByText 函数来检查页面上是否存在 TextField 组件。
模拟 React 包
有时候，组件使用了 React 原始包来实现功能。例如，Button组件可能需要使用 React 的 useState 钩子。在这种情况下，我们可以通过使用 jest.mock() 函数模拟 React 包。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --- - ---- ------------------------- ------ ------ ---- ----------- ------------------ -- -- -- ------------------------------- --------- ---------- -- -------- ----------- ---- ------------- ------ ---- ----- ------- -- -- - ----- ---------- - ------ ---- ----- - --------- - - -------------- ----------------- ---- ---------------------------------------------- ---
在这个示例中，我们使用 jest.mock() 函数模拟 React 包并返回一个伪造的 useState 钩子。然后，我们渲染 Button 组件并期望实现的页面上显示 "Test"。
模拟 Redux Store
如果组件使用 Redux Store 来处理状态更改，我们可以使用模拟（Mock） store 来模拟 Redux Store。以下示例演示如何模拟 Redux 店铺。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ - -------- - ---- --------------
------ ------ ---- -----------
------ -------------- ---- ----------
------------- ------ ---- ----- ------- -- -- -
----- ---------- - ------ ----
----- ------------ - - -------- -------- -------- -- -- -- ----- ------- -------- --------
----- ----- - -----------------------------
----- - --------- - - -------
--------- --------------
------- ----------------- --
-----------
--
------------------------- -------------------------------
---在这个示例中，我们使用 Provider 来包装 Button 组件，并向其传递 configureStore 函数的输出结果作为 Web 组件的 prop。然后，我们使用 getByText 函数检查页面上是否存在与 Redux Store 状态相符的输出。
总结
在文章中，我们深入学习了使用 Jest 模拟组件的方法，并更深入了解了与模拟相关的概念。模拟组件的示例非常广泛，包括模拟依赖项，模拟 React 包和模拟 Redux Store 等。掌握这些技术可以显著提高前端测试的速度和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a703c48841e9894892616