Jest + Enzyme 教程：如何测试 React 应用程序-JavaScript中文网-JavaScript教程资源分享门户

Jest + Enzyme 教程：如何测试 React 应用程序

在开发应用程序的过程中，测试是非常重要的一个环节。测试可以帮助我们发现问题，提高代码质量，避免因为修改代码而引起的新问题。而 React 应用程序也不例外，如何进行有效的测试也是前端开发者需要掌握的必备技能之一。本篇文章将介绍如何使用 Jest 和 Enzyme 对 React 应用程序进行测试，并附有示例代码。

Jest 和 Enzyme 简介

Jest 是 Facebook 开源的一款 JavaScript 测试框架，它可以在命令行中运行，也可以与其他工具（如 Webpack、Babel、TypeScript 等）一起使用。Jest 具有零配置、快速、并行执行测试等特点，并且可以很好地支持 React 应用程序的测试。

Enzyme 是 Airbnb 开源的 React 组件测试工具，它提供了一组简单的 API，用于模拟 React 组件的渲染和交互，帮助我们编写更加全面的测试用例。Enzyme 还可以与 Jest 非常好地配合使用，提供更完善的测试环境。

安装 Jest 和 Enzyme

在开始之前，我们需要安装 Jest 和 Enzyme。在终端中运行以下命令：

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

其中，enzyme-adapter-react-16 是 Enzyme 针对 React 16 版本的适配器，如果你使用的是不同版本的 React，则需要安装对应的适配器。

配置 Jest

在项目根目录下，新建一个 jest.config.js 文件，并添加以下配置：

module.exports = {
  testEnvironment: "jsdom",
};

这里配置了 Jest 使用 jsdom 作为测试环境，jsdom 为浏览器环境的模拟器，能够在 Node.js 环境中模拟浏览器环境，以便进行页面的渲染和交互操作。

配置 Enzyme

在项目根目录下，新建一个 setupTests.js 文件，并添加以下配置：

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

这里配置了 Enzyme 使用 React 16 版本的适配器。

编写测试用例

在开始编写测试用例之前，我们先来了解一下 React 组件的几个概念：

一个组件是由一些列的属性组成的。
组件会根据属性的变化而重新渲染。
组件可能会有一些状态，状态会影响组件的渲染。

根据这些概念，我们可以编写一些测试用例。以一个简单的组件为例：

// javascriptcn.com 代码示例
import React from "react";

function Button({ disabled, onClick }) {
  return (
    <button disabled={disabled} onClick={onClick}>
      Click me
    </button>
  );
}

export default Button;

我们可以编写以下测试用例：

// javascriptcn.com 代码示例
import { mount } from "enzyme";
import Button from "./Button";

describe("Button", () => {
  it("should render correctly", () => {
    const wrapper = mount(<Button />);
    expect(wrapper).toMatchSnapshot();
  });

  it("should call onClick when clicked", () => {
    const onClick = jest.fn();
    const wrapper = mount(<Button onClick={onClick} />);
    wrapper.find("button").simulate("click");
    expect(onClick).toHaveBeenCalled();
  });

  it("should be disabled when disabled prop is true", () => {
    const wrapper = mount(<Button disabled={true} />);
    expect(wrapper.find("button")).toBeDisabled();
  });
});

这里我们使用了 describe 函数将测试用例分组，每个测试用例使用 it 函数定义。具体来说：

第一个测试用例 should render correctly 测试了组件的正确渲染，使用了 Jest 的 toMatchSnapshot 函数来比对组件生成的快照。
第二个测试用例 should call onClick when clicked 测试了当组件被点击时是否正确调用了传入的 onClick 函数，使用了 Enzyme 的 simulate 函数来模拟点击事件。
第三个测试用例 should be disabled when disabled prop is true 测试了当传入的 disabled 属性为 true 时，组件是否正确禁用，使用了 Enzyme 的 toBeDisabled 匹配器来判断是否禁用。

运行测试

在终端中运行以下命令即可运行所有的测试用例：

npx jest

你将会看到测试的结果输出在终端中，如下所示：

总结

通过本篇文章的介绍，我们了解了如何使用 Jest 和 Enzyme 对 React 应用程序进行测试，并编写了一些测试用例。测试可以帮助我们减少代码的 Bug，提高代码的可维护性和可读性，也是我们作为前端开发者必须掌握的技能。希望本篇文章能够对你有所帮助。

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