React 是一个非常受欢迎的前端框架，用于构建 Web 应用程序。在 React 开发过程中，单元测试是不可或缺的一部分。集成测试不仅有助于检测应用程序中的错误，而且可以防止测试漏洞的出现。Enzyme 和 Jest 是两个通常用于测试 React 组件的最流行框架，它们提供了一种简单的方式来测试您的应用程序。
在这篇文章中，我们将深入了解 Enzyme 和 Jest 并探讨如何使用它们来防止测试漏洞。
安装和配置 Enzyme 和 Jest
在使用 Enzyme 和 Jest 之前，您需要为项目安装两者。您可以通过 NPM 安装。
npm install --save-dev enzyme jest
您需要创建一个配置文件用于 Jest。在项目根目录中创建一个名为 jest.config.js 的文件，并将以下内容复制到其中：
module.exports = {
// 这里添加你的 jest 配置
testMatch: ["<rootDir>/tests/**/*.test.js"],
setupFilesAfterEnv: ["<rootDir>/tests/setupTests.js"]
}我们在配置文件的 testMatch 属性中指定了 Jest 匹配测试文件的路径。在这个例子中，我们使用 ** 来表示所有文件夹和文件。我们还在 setupFilesAfterEnv 属性中指定了一个文件夹，该文件夹中的代码将在每个测试运行之前运行。
接下来，创建一个名为 setupTests.js 的文件，并将以下代码添加到其中：
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });这里我们导入 Enzyme 和 React 适配器，然后将适配器配置给 Enzyme。
Enzyme 基础
在本节中，我们将深入了解 Enzyme 的基本概念，包括 Shallow Rendering 和 Mounting。
Shallow Rendering
Shallow Rendering 是 Enzyme 中的本地呈现方法，用于渲染 React 组件的一部分。Shallow Rendering 不执行嵌套组件中的代码，因此在测试组件时非常适用。
要使用 Shallow Rendering，您需要导入 Enzyme 并使用 shallow 方法渲染组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这个例子中，我们将 MyComponent 渲染到一个 ShallowWrapper 中，并使用 toMatchSnapshot() 比较结果，可以非常方便地测试输出。
Mounting
Mounting 是 Enzyme 中的完整渲染方法，用于渲染整个组件树，包括嵌套组件。由于 Mounting 可能会影响其他组件，因此在测试组件时需要小心。
要使用 Mounting，您需要导入 Enzyme 并使用 mount 方法渲染组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---在这个例子中，我们使用 mount() 方法渲染 MyComponent 并与快照进行比较。
封装组件
在 Enzyme 中，您可以使用的第三种方法是 Render Prop。Render Props 是 Enzyme 中的渲染模式之一，它允许您在组件内部呈现一个函数，从而可以在测试组件时方便地获取内部内容。
要使用 Render Prop，您需要将一个函数作为 prop 传递给组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ---------- -- ----------- ----------- ----
----------------------------------
---
---在渲染 MyComponent 时，我们使用传递给组件的函数作为参数，以获取在函数内部返回的内容。
基本 Jest
在本节中，我们将深入了解 Jest 的基本概念，包括匹配器和模拟。
Matchers
Jest 提供了许多内置匹配器，您可以使用它们来测试不同的数据类型。这里有一些常用的匹配器：
- toBe(expected)：比较值是否与期望值相同；
- toEqual(expected)：递归地比较对象是否相等；
- toMatch(regexp)：比较字符串是否与正则表达式匹配；
- toContain(expected)：比较数组或迭代器中是否包含一个值；
- toThrow(error)：比较函数是否会抛出一个错误。
以下是一个使用 toBe() 匹配器测试字符串的例子：
const add = (a, b) => a + b;
describe('add', () => {
it('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
});模拟
在测试过程中，您可能需要模拟某些组件或函数，从而使测试更为真实。
对于函数，使用 jest.fn() 可以为其创建一个模拟函数。例如：
describe('MyComponent', () => {
it('should call handleButtonClick when button is clicked', () => {
const handleButtonClick = jest.fn();
const wrapper = shallow(<MyComponent handleButtonClick={handleButtonClick} />);
wrapper.find('button').simulate('click');
expect(handleButtonClick).toHaveBeenCalled();
});
});这里我们在组件渲染之前创建了一个模拟函数 handleButtonClick，并将其作为 prop 传递给组件。我们然后模拟按钮单击事件，并使用 toHaveBeenCalled() 匹配器检查模拟函数是否已调用。
对于组件，使用 jest.mock() 可以为其创建一个模拟组件。例如：
jest.mock('./MyComponent', () => 'MockMyComponent');
describe('App', () => {
it('renders MockMyComponent', () => {
const wrapper = shallow(<App />);
expect(wrapper.find('MockMyComponent')).toHaveLength(1);
});
});这里我们使用 jest.mock() 来为 MyComponent 创建一个模拟组件。我们对 App 组件进行浅渲染，并使用 toHaveLength() 匹配器检查是否已呈现一个 MockMyComponent。
结论
在本文中，我们介绍了 Enzyme 和 Jest 的基础知识，并演示了如何使用它们来防止测试漏洞。
通过使用 Enzyme 和 Jest 的基本知识，您应该能够编写高质量的 React 组件测试并防止测试漏洞的出现。希望这篇文章有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735eb7c0bc820c5825136c2