Enzyme：简化你的 React 测试-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的 JavaScript 库，可轻松构建基于组件的用户界面。对于开发人员来说，测试 React 应用程序至关重要，因为这可以确保我们的代码在生产环境中能够按照我们预期的方式工作。随着组件越来越复杂，测试也变得越来越困难。但是，有一个工具可以简化我们的测试流程，它就是 Enzyme。

什么是 Enzyme

Enzyme 是由 Airbnb 开发的一个 React 测试工具，它提供了一系列 API，可以轻松编写测试 React 组件的代码。它的 API 很直观并且具有可读性，因此您可以使用 Enzyme 轻松参考文档编写测试代码。Enzyme 支持的 React 版本从 0.13 到最新的稳定版本。

安装

在使用 Enzyme 之前，我们需要先安装它。我们可以使用 npm 等包管理器来安装它。

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

我们还需要安装适合当前版本的适配器（adapter）来使 Enzyme 能够使用 React。

在测试文件开头引入 Enzyme 和适配器：

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

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

测试组件

假设我们有一个简单的 React 组件：

import React from "react";

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

我们想要确保组件在渲染时工作正常并且在传递正确的属性时会显示正确的输出。我们可以使用 Enzyme 来创建一个新的测试文件：

// javascriptcn.com 代码示例
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Greeting from "./Greeting";

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

describe("Greeting component", () => {
  it("renders correctly with props", () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper.find("h1").text()).toEqual("Hello, World!");
  });
});

在此示例中，我们使用 shallow API 来创建组件的浅层渲染，这意味着除了当前组件，它不会渲染其子组件。我们使用 find API 查找我们想要测试的节点，并使用 text API 检索其文本内容。最后，我们使用 Jest 的断言 toEqual 验证文本是否正确。

更深入的测试

假设我们有一个稍微复杂的组件：

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

function Counter() {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

export default Counter;

此组件具有内部状态，即计数器。我们可以使用 Enzyme 模拟单击事件以测试组件是否输出正确。

// javascriptcn.com 代码示例
describe("Counter component", () => {
  const wrapper = shallow(<Counter />);

  it("starts with a count of 0", () => {
    expect(wrapper.find("h1").text()).toEqual("0");
  });

  it("increments count by 1 when the +1 button is clicked", () => {
    wrapper.find("button").at(0).simulate("click");
    expect(wrapper.find("h1").text()).toEqual("1");
  });

  it("decrements count by 1 when the -1 button is clicked", () => {
    wrapper.find("button").at(1).simulate("click");
    expect(wrapper.find("h1").text()).toEqual("0");
  });
});

在此示例中，我们使用 at API 选择我们希望与之交互的按钮，然后使用 simulate API 模拟按钮的单击事件。最后，我们使用 Jest 的 toEqual 断言验证文本是否正确。

总结

Enzyme 是一个非常强大的工具，由于其 API 简洁明了，易于阅读，可以轻松创建测试 React 组件的代码。使用 Enzyme 模拟可能比通过用户界面手动测试要快得多。我们可以通过干净，便捷和可维护的方式确保我们的 React 应用程序工作正常。

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