如何在 Next.js 中实现自动化测试？-JavaScript中文网-JavaScript教程资源分享门户

自动化测试是一种在应用开发过程中变得越来越重要的技术。在当今市场上，每天发布的应用程序数量都在不断增长，因此测试是确保应用程序质量符合标准的必要步骤。在本文中，我们将学习如何在 Next.js 中实现自动化测试。

为什么要进行自动化测试？

在开发应用程序时，经常会出现问题。这些问题可能源于代码、外部网站、服务器或其他问题。为了确保应用程序的可靠性和质量，开发人员必须测试应用程序以发现和解决这些问题。如果手动测试的话，会很费时间和精力。自动化测试则能相应地更加快捷、质量可控。

自动化测试是应用程序开发中发现和解决问题的关键步骤之一。自动化测试可以：

以标准化和连贯的方式来执行测试用例。
自动运行测试过程，从而减少人工时间成本。
易于识别错误和问题，提高了应用程序的可靠性和质量。
在测试样本上运行各种变体，以便拟合大多数使用情况。
让开发人员快速构建、测试和部署应用程序。

如何在 Next.js 中进行自动化测试？

下面我们将学习如何在 Next.js 中实现自动化测试。具体实现过程要点如下：

使用 Jest 编写和运行测试。
使用 Puppeteer 进行端到端测试。
在 Travis CI 上运行测试。

使用 Jest 编写和运行测试

Jest 是一个流行的测试框架，可用于编写和运行 JavaScript 测试。Jest 具有许多实用功能，例如 Jest Snapshots、代码覆盖率检查等。对于前端开发者而言，Jest 测试极为好用。

首先，安装 Jest 和 Enzyme。由于 Next.js 内置 React，因此需要使用 Enzyme 来集成 React 中的测试。使用以下命令来安装所需的包：

npm install --save-dev jest @testing-library/react enzyme enzyme-adapter-react-16

然后在 package.json 文件中添加 Jest 配置：

// javascriptcn.com 代码示例
{
  "scripts": {
    "test": "jest" 
  },
  "jest": {
    "collectCoverage": true,
    "setupTestFrameworkScriptFile": "./configureJest.js",
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/$1"
    }
  }
}

在根目录下创建 configureJest.js 文件：

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

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

现在，可以在项目中创建测试文件。例如，假设我们有一个组件 Counter，例如：

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

interface Props {}

interface State {
  count: number;
}

export default class Counter extends React.Component<Props, State> {
  state = {
    count: 0
  };

  increment = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      count: prevState.count - 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <span>{this.state.count}</span>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

我们可以在 components/__tests__/Counter.test.tsx 中编写测试：

// javascriptcn.com 代码示例
import Counter from '@/components/Counter';
import React from 'react';
import { shallow } from 'enzyme';

test('counter increments correctly', () => {
  const wrapper = shallow(<Counter />);
  const incrementBtn = wrapper.find('button').at(0);
  const countDisplay = wrapper.find('span');

  expect(countDisplay.text()).toBe('0');

  incrementBtn.simulate('click');
  expect(countDisplay.text()).toBe('1');
});

test('counter decrements correctly', () => {
  const wrapper = shallow(<Counter />);
  const decrementBtn = wrapper.find('button').at(1);
  const countDisplay = wrapper.find('span');

  expect(countDisplay.text()).toBe('0');

  decrementBtn.simulate('click');
  expect(countDisplay.text()).toBe('-1');
});

现在运行 npm test 命令即可展示两个测试用例的结果。

使用 Puppeteer 进行端到端测试

Puppeteer 是一个 Node.js 库，它提供了一个高级 API，允许测试端到端的场景（例如浏览器中的自动化操作和网站层）。我们可以使用 Puppeteer 来测试类似于“单击按钮”、“输入表单”和“导航到特定网址”之类的基础功能。

假设我们要编写一个测试用例，以测试我们的 Counter 组件是否能工作。我们可以执行以下操作：

打开浏览器并导航到我们的网站。
查找与“Counter”组件相关的元素。
单击增量按钮，验证计数器是否增加。
单击减量按钮，验证计数器是否减少。

在进行 Puppeteer 测试之前，需要添加一些 Jest 和 Puppeteer 测试所需的依赖。使用以下命令安装这些依赖：

npm install --save-dev puppeteer jest-environment-puppeteer jest-puppeteer

在 package.json 文件中配置 JestPuppeteer：

{
  "jest": {
    "globalSetup": "./jest/setup.js",
    "globalTeardown": "./jest/teardown.js",
    "preset": "jest-puppeteer",
    "testRegex": "\\.puppeteer\\.ts$"
  }
}

在测试目录下创建 jest/setup.js 文件：

const puppeteer = require('puppeteer');

module.exports = async () => {
  global.__BROWSER__ = await puppeteer.launch({
    headless: false,
  });
};

在测试目录下创建 jest/teardown.js 文件：

module.exports = async () => {
  await global.__BROWSER__.close();
};

现在，我们可以使用 Puppeteer 编写测试用例。在 components/__tests__/Counter.puppeteer.tsx 中编写如下代码：

// javascriptcn.com 代码示例
const URL = 'http://localhost:3000';

describe('Counter', () => {
  beforeAll(async () => {
    await page.goto(URL);
  });

  test('counter increments and decrements correctly', async () => {
    await page.click('button:nth-of-type(1)');
    let count = await page.$eval('span', el => el.innerHTML);
    expect(count).toBe('1');

    await page.click('button:nth-of-type(2)');
    count = await page.$eval('span', el => el.innerHTML);
    expect(count).toBe('0');
  });
});

现在运行 npm run test-puppeteer 命令即可执行 Puppeteer 测试用例。这里就不要没有设置好本地服务器，可以本地调试时自己先在本地服务器上部署好，然后再进行时候将 URL 指向本地服务器。

在 Travis CI 上运行测试

Travis CI 是一项持续集成服务，支持 GitHub 上的存储库。Travis CI 可以自动运行您的测试并报告结果。

要将 Travis CI 配置为 Next.js 应用程序的自动化测试，需要执行以下步骤：

配置 .travis.yml 文件。
在 .travis.yml 中配置环境变量。
配置 Travis CI 的访问令牌。

下面是一个 .travis.yml 文件的示例内容：

// javascriptcn.com 代码示例
language: node_js
node_js:
  - "12"
cache:
  directories:
    - "node_modules"
    - "coverage"

install:
  - npm install
  - npm install coveralls
  - npm run build

jobs:
  include:
    - stage: "Test"
      name: "Jest and Enzyme tests"
      script: npm run test-ci
    - stage: "Test"
      name: "Puppeteer tests"
      if: branch != master
      script: npm run test-puppeteer-ci

after_script:
  - cat ./coverage/lcov.info | coveralls

接下来在 Travis CI 上配置环境变量：COVERALLS_REPO_TOKEN（可以到[coveralls.io/github][coveralls.io/github]申请）。

每当您提交代码时，Travis CI 将启动构建，构建包含您的测试。当构建完成后，Travis CI 将向 GitHub 存储库的提交注释中添加构建状态，并向您发送电子邮件。如果某些测试失败，Travis CI 将发出警报。

总结

在本文中，我们讨论了如何在 Next.js 中进行自动化测试。我们使用 Jest、Enzyme 和 Puppeteer 为我们的应用程序编写和运行测试，并以 Travis CI 的形式自动运行测试。这也是前端工程师应该具备的重要技能之一。我们学习并了解了自动化测试的好处，并在 Next.js 中应用了自动化测试。

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