【前端】如何在 Next.js 中进行测试并配置 CI/CD

news2024/11/5 16:36:19

在 Next.js 中进行测试并配置 CI/CD（持续集成和持续部署）是保证应用质量和自动化发布流程的重要环节。下面我将详细介绍如何在 Next.js 项目中进行单元测试、集成测试和端到端测试，并配置 CI/CD 流程。

1. 设置测试环境

单元测试与集成测试

Jest: Jest 是一个流行的 JavaScript 测试框架，支持单元测试和集成测试。

安装 Jest 和相关依赖

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

配置 Jest

在项目根目录下创建或修改 jest.config.js：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

编写测试

创建一个测试文件，例如 components/Button.test.js：

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from './Button';

describe('Button component', () => {
  it('renders correctly', () => {
    render(<Button />);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('calls the onClick prop when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick} />);
    fireEvent.click(screen.getByText('Click me'));
    expect(handleClick).toHaveBeenCalled();
  });
});

运行测试

在 package.json 中添加一个测试脚本：
```
"scripts": {
  "test": "jest"
}
```
运行测试：
```
npm run test
```

端到端测试

Cypress: Cypress 是一个现代的端到端测试框架，非常适合测试 Next.js 应用。

安装 Cypress
```
npm install --save-dev cypress
```

编写端到端测试

在 cypress/integration 目录下创建测试文件，例如 example.spec.js：

describe('Home page', () => {
  it('displays a welcome message', () => {
    cy.visit('/');
    cy.contains('Welcome');
  });

  it('has a link to the about page', () => {
    cy.get('a[href="/about"]').should('exist');
  });
});

运行端到端测试

运行 Cypress 测试：
```
npx cypress open
```

2. 配置 CI/CD

GitHub Actions

GitHub Actions 是一种流行的 CI/CD 解决方案，可以无缝集成到 GitHub 仓库中。

创建 CI/CD 工作流程

在 .github/workflows 目录下创建一个 YAML 文件，例如 ci.yml：

name: CI/CD Pipeline

on:
  push:
    branches:
      - main # 主分支名称可以根据实际情况修改

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js environment
        uses: actions/setup-node@v2
        with:
          node-version: 16 # 根据需要选择 Node.js 版本

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm run test

      - name: Build application
        run: npm run build

  deploy:
    needs: build
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Deploy to production
        env:
          NEXT_PUBLIC_VERCEL_URL: ${{ secrets.NEXT_PUBLIC_VERCEL_URL }}
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: |
          npx vercel --prod

配置 Vercel 部署密钥

在 GitHub 仓库的 Settings -> Secrets -> Actions 中添加 NEXT_PUBLIC_VERCEL_URL 和 VERCEL_TOKEN。

Vercel

Vercel 是一个广泛使用的部署平台，可以直接从 GitHub 仓库部署 Next.js 应用。

连接 GitHub 仓库

登录 Vercel 控制台，连接你的 GitHub 账号，并选择要部署的仓库。
配置部署设置

在 Vercel 控制台中为项目配置构建命令和输出目录：
- Build Command: npm run build
- Output Directory: .next
自动部署

Vercel 支持通过 Git Hook 或者 GitHub Actions 自动部署。确保你的 GitHub 仓库中的 .github/workflows/ci.yml 文件正确配置了 Vercel 部署命令。