Next.js集成Cypress E2E测试

最近刚给我的Next.js项目加上了GitHub的CI/CD，感觉整个工作流程顺畅了不少。但是呢，总感觉少了一些安全感，于是就研究了一下E2E的测试，这样一来就能在每次推送代码时自动运行测试，确保一切正常运行。比来比去，最后选择了Cypress来搞定这件事，这里记录一下大概的流程。

1. 安装Cypress

使用pnpm命令安装Cypress :

Bash
复制
1pnpm add --save-dev cypress

注意:安装过程可能需要一些时间,特别是在网络条件不佳的情况下。

2. 配置package.json

在package.json文件中添加以下scripts:

JSON
复制
1"scripts": {
2  ...
3  "cypress:open": "cypress open",
4  "cypress:run": "cypress run",
5  "test:e2e": "start-server-and-test start http://localhost:3000 \"cypress run\""
6}

这些脚本允许你方便地运行Cypress测试。

3. 初始化Cypress

运行以下命令初始化Cypress:

Bash
复制
1npx cypress open

这将在你的项目中创建一个cypress目录,包含了默认的配置和示例测试。

4. 创建测试文件

在cypress/e2e目录下创建一个新的测试文件,例如home.spec.js:

JS
复制
1describe('Home Page', () => {
2    beforeEach(() => {
3        cy.visit('/');
4    });
5
6    it('should have correct metadata', () => {
7        cy.title().should('eq', '航向未知');
8        cy.get('meta[name="description"]').should('have.attr', 'content', 'Hi, I\'m Yuhang, A Passionate Full Stack Developer');
9    });
10});

这个简单的测试访问首页,检查一些元素,然后模拟用户点击操作。

5. 配置Cypress

在项目根目录创建cypress.config.js文件:

JS
复制
1const { defineConfig } = require('cypress')
2
3const port = process.env.PORT || '3000'
4
5module.exports = defineConfig({
6  e2e: {
7    baseUrl: `http://localhost:${port}`,
8    supportFile: false,
9  },
10})

这个配置文件设置了基本URL和禁用了默认的support文件。

6. 安装start-server-and-test

为了在运行测试前自动启动Next.js服务器,我们需要安装start-server-and-test 这个命令会先启动Next.js开发服务器,然后运行Cypress测试。

Bash
复制
1pnpm add --save-dev start-server-and-test

7. 运行测试

如果你想在Cypress GUI中运行测试,可以使用 cypress:open:

Bash
复制
1pnpm run cypress:open
2
3# 命令行无头运行
4pnpm run cypress:run

8. 持续集成

要在CI环境中运行测试,你可以使用cypress run命令。大多数CI平台都支持运行npm scripts,所以你可以直接使用test:e2e脚本。

例如,在GitHub Actions中,你可以创建一个.github/workflows/e2e.yml文件:

YAML
复制
1name: E2E Tests
2on: [push]
3jobs:
4  test:
5    runs-on: ubuntu-latest
6    steps:
7      - uses: actions/checkout@v2
8      - name: Use Node.js
9        uses: actions/setup-node@v2
10        with:
11          node-version: '20'
12      - run: pnpm ci
13      - run: pnpm run build
14      - run: pnpm run test:e2e

这个配置可以保证在每次push时运行E2E的测试。