Puppeteer 和 Jest 测试 React 应用，从此自信满满！

2024-02-13 10:34:49

端到端测试能帮助我们确保 React 应用中所有的组件都能像我们预期的那样工作，而单元测试和集成测试都无法做到这一点。

为了解决这个问题，Google 为我们提供了 Puppeteer 这个基于 Dev Tools 协议封装的上层 API 接口的 Node 库，为我们提供方便的渠道来控制 Chromium，从而进行端到端测试。

安装 Puppeteer 和 Jest

首先，让我们来安装 Puppeteer 和 Jest：

npm install --save-dev puppeteer jest

编写测试文件

现在，我们可以编写测试文件了。比如，我们有一个 App.js 文件，其中有一个 Button 组件：

import React, { useState } from "react";

const Button = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me: {count}
    </button>
  );
};

export default Button;

我们可以编写一个测试文件来测试这个 Button 组件：

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import Button from "./Button";

describe("Button", () => {
  it("should increment the count when clicked", () => {
    const { getByText } = render(<Button />);
    const button = getByText("Click me: 0");

    fireEvent.click(button);

    expect(button).toHaveTextContent("Click me: 1");
  });
});

运行测试

现在，我们可以运行测试了：

npm run test

如果测试通过，你应该会看到以下输出：

PASS src/Button.test.js
  √ should increment the count when clicked (42ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.595s, estimated 2s