如何在 Jest 中使用 Enzyme 进行 React 组件 UI 测试-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的前端框架，它提供了一种声明式的方式来构建用户界面。在 React 中，组件是构建用户界面的基本单位，因此对于 React 应用程序来说，组件的正确性和稳定性是至关重要的。为了确保组件的正确性和稳定性，我们需要进行 UI 测试。在本文中，我们将介绍如何在 Jest 中使用 Enzyme 进行 React 组件 UI 测试。

Jest 和 Enzyme

Jest 是 Facebook 开发的一个测试框架，它提供了一个简单而强大的测试环境，可以用于测试 JavaScript 应用程序的各个方面。Jest 可以运行在 Node.js 环境中，也可以在浏览器环境中运行。

Enzyme 是 Airbnb 开发的一个 React 测试工具，它提供了一些实用的工具，可以让我们方便地测试 React 组件的 UI。

安装 Jest 和 Enzyme

首先，我们需要安装 Jest 和 Enzyme。可以使用 npm 或者 yarn 来安装它们：

npm install --save-dev jest enzyme enzyme-adapter-react-16

或者

yarn add --dev jest enzyme enzyme-adapter-react-16

配置 Enzyme

在使用 Enzyme 之前，我们需要配置它。Enzyme 有不同的适配器可以用于不同版本的 React。在本文中，我们将使用 Enzyme 适配器 React 16。

在项目的根目录下创建一个 setupTests.js 文件，并添加以下内容：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

这个文件将在 Jest 运行测试之前被执行，并配置 Enzyme 的适配器。

编写测试用例

现在，我们可以编写我们的测试用例了。假设我们有一个简单的组件 HelloWorld，它接受一个 name 属性，并显示一条问候语。

import React from 'react';

const HelloWorld = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

export default HelloWorld;

我们的测试用例将测试这个组件是否正确地渲染了问候语。

首先，我们需要导入 shallow 函数和组件 HelloWorld：

import { shallow } from 'enzyme';
import HelloWorld from './HelloWorld';

然后，我们可以编写我们的测试用例：

describe('HelloWorld', () => {
  it('renders the correct greeting', () => {
    const wrapper = shallow(<HelloWorld name="Alice" />);
    const greeting = <h1>Hello, Alice!</h1>;
    expect(wrapper.contains(greeting)).toEqual(true);
  });
});

在这个测试用例中，我们使用 shallow 函数来创建一个浅渲染的组件实例，并传递一个 name 属性。然后，我们使用 contains 函数来检查组件是否正确地渲染了问候语。

运行测试

现在，我们可以运行我们的测试了。在项目根目录下运行以下命令：

npm test

或者

yarn test

Jest 将运行我们的测试用例，并输出测试结果：

PASS  ./HelloWorld.test.js
  HelloWorld
    ✓ renders the correct greeting (5ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.053s, estimated 3s
Ran all test suites.

测试用例通过了，我们的组件可以正确地渲染问候语。

总结

在本文中，我们介绍了如何在 Jest 中使用 Enzyme 进行 React 组件 UI 测试。我们首先安装了 Jest 和 Enzyme，然后配置了 Enzyme 的适配器。最后，我们编写了一个简单的测试用例来测试一个组件是否正确地渲染了问候语。这个测试用例通过了，说明我们的组件可以正确地渲染问候语。UI 测试是确保 React 应用程序稳定性和正确性的重要手段，希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658c1be1eb4cecbf2d17980a