介绍
在开发 React 应用程序时，测试是一个很重要的环节。为了确保代码的质量，我们需要对组件进行测试。Enzyme 是 React 应用程序测试的一个流行工具，它允许我们快速、简便地测试 React 组件。Enzyme 提供了一组 API，可以模拟组件的渲染和行为。Jest 是一个流行的 JavaScript 测试框架，它提供了丰富的断言库和测试运行器。在本文中，我们将介绍如何在 Enzyme 中使用 Jest 断言来运行 React 组件测试。
安装 Enzyme 和 Jest
在开始之前，我们需要安装 Enzyme 和 Jest。可以使用以下命令来安装它们：
npm install --save-dev enzyme jest enzyme-adapter-react-16
编写测试
我们可以使用 Enzyme 的 shallow 函数来渲染 React 组件。这个函数会返回一个包含组件的浅渲染的 Wrapper 对象。我们可以使用这个对象来模拟组件的行为，例如模拟用户输入和触发事件。
下面是一个简单的 React 组件：
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;我们可以编写一个测试来测试这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
----------- - ---------- -- -- -
----- ------- - ----------------- ------------ ----
------------------------------------------------- ---------
---
---这个测试使用了 Jest 的 describe 和 it 函数来定义测试套件和测试用例。我们使用 shallow 函数来渲染 Greeting 组件，并使用 expect 函数来断言渲染结果是否符合预期。
使用 Jest 断言
Jest 提供了许多有用的断言函数，可以用来测试组件的行为。以下是一些常用的断言函数：
expect(value).toBe(expected)：测试值是否等于预期值。expect(value).toEqual(expected)：测试值是否深度等于预期值。expect(value).toBeDefined()：测试值是否已定义。expect(value).toBeNull()：测试值是否为 null。expect(value).toBeTruthy()：测试值是否为真。expect(value).toBeFalsy()：测试值是否为假。expect(value).not.toBe(expected)：测试值是否不等于预期值。expect(value).toMatch(pattern)：测试值是否匹配正则表达式。expect(callback).toThrow(expected)：测试回调函数是否抛出异常。
下面是一个使用 toMatch 函数的例子：
describe('Greeting', () => {
it('renders a greeting', () => {
const wrapper = shallow(<Greeting name="World" />);
expect(wrapper.find('h1').text()).toMatch(/^Hello, /);
});
});这个测试使用了正则表达式来测试渲染结果是否以 "Hello, " 开头。
结论
在本文中，我们介绍了如何在 Enzyme 中使用 Jest 断言来运行 React 组件测试。我们看到了如何使用 Enzyme 的 shallow 函数来渲染组件，并使用 Jest 的断言函数来测试组件的行为。这些技术可以帮助我们快速、简便地测试 React 应用程序，从而提高代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673efd3e5ade33eb722d0edb