Next.js API 测试

在开发 Next.js 应用时，API 路由是一个强大的功能，它允许你在同一个项目中编写前端和后端代码。然而，为了确保你的 API 路由按预期工作，测试是必不可少的。本文将带你了解如何在 Next.js 中测试 API 路由，并提供实际的代码示例和案例。

什么是 API 测试？

API 测试是一种验证 API 是否按预期工作的过程。它包括检查 API 的响应、状态码、错误处理等。在 Next.js 中，API 路由是通过 pages/api 目录下的文件定义的，因此我们可以通过编写测试来验证这些路由的行为。

设置测试环境

在开始测试之前，我们需要设置一个测试环境。我们将使用 Jest 和 supertest 来编写和运行测试。

首先，安装所需的依赖：

bash
npm install --save-dev jest supertest @types/jest @types/supertest

接下来，在项目根目录下创建一个 jest.config.js 文件，配置 Jest：

javascript
module.exports = {
  testEnvironment: 'node',
  testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
};

编写第一个 API 测试

假设我们有一个简单的 API 路由 pages/api/hello.js，它返回一个 JSON 对象：

javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

我们可以为这个 API 路由编写一个测试：

javascript
// tests/api/hello.test.js
import request from 'supertest';
import app from '../../pages/api/hello';

describe('GET /api/hello', () => {
  it('should return a message', async () => {
    const response = await request(app).get('/api/hello');
    expect(response.statusCode).toBe(200);
    expect(response.body).toEqual({ message: 'Hello, world!' });
  });
});

在这个测试中，我们使用 supertest 来模拟 HTTP 请求，并验证响应是否符合预期。

测试错误处理

除了测试成功的响应，我们还需要测试 API 的错误处理。假设我们有一个 API 路由 pages/api/error.js，它在某些情况下会返回错误：

javascript
// pages/api/error.js
export default function handler(req, res) {
  if (req.query.fail) {
    res.status(400).json({ error: 'Something went wrong' });
  } else {
    res.status(200).json({ message: 'Success' });
  }
}

我们可以为这个 API 路由编写一个测试，验证它在失败情况下的行为：

javascript
// tests/api/error.test.js
import request from 'supertest';
import app from '../../pages/api/error';

describe('GET /api/error', () => {
  it('should return an error when fail=true', async () => {
    const response = await request(app).get('/api/error?fail=true');
    expect(response.statusCode).toBe(400);
    expect(response.body).toEqual({ error: 'Something went wrong' });
  });

  it('should return success when fail is not present', async () => {
    const response = await request(app).get('/api/error');
    expect(response.statusCode).toBe(200);
    expect(response.body).toEqual({ message: 'Success' });
  });
});

实际案例：用户认证 API

让我们看一个更复杂的例子：一个用户认证 API。假设我们有一个 API 路由 pages/api/login.js，它接受用户名和密码，并返回一个认证令牌：

javascript
// pages/api/login.js
export default function handler(req, res) {
  const { username, password } = req.body;

  if (username === 'admin' && password === 'password') {
    res.status(200).json({ token: 'fake-token' });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
}

我们可以为这个 API 路由编写测试，验证它在不同输入下的行为：

javascript
// tests/api/login.test.js
import request from 'supertest';
import app from '../../pages/api/login';

describe('POST /api/login', () => {
  it('should return a token with valid credentials', async () => {
    const response = await request(app)
      .post('/api/login')
      .send({ username: 'admin', password: 'password' });
    expect(response.statusCode).toBe(200);
    expect(response.body).toEqual({ token: 'fake-token' });
  });

  it('should return an error with invalid credentials', async () => {
    const response = await request(app)
      .post('/api/login')
      .send({ username: 'admin', password: 'wrong' });
    expect(response.statusCode).toBe(401);
    expect(response.body).toEqual({ error: 'Invalid credentials' });
  });
});

总结

在本文中，我们学习了如何在 Next.js 中测试 API 路由。我们使用 Jest 和 supertest 编写了测试，并验证了 API 的响应和错误处理。通过测试，我们可以确保我们的 API 路由按预期工作，从而提高代码的可靠性和可维护性。

附加资源

练习

为你的 Next.js 项目中的另一个 API 路由编写测试。
尝试测试一个更复杂的 API，例如处理文件上传或数据库操作的 API。
探索如何在 CI/CD 管道中集成 API 测试。

提示

在编写测试时，尽量覆盖所有可能的输入和边界情况，以确保你的 API 在各种情况下都能正常工作。

什么是 API 测试？​

设置测试环境​

编写第一个 API 测试​

测试错误处理​

实际案例：用户认证 API​

总结​

附加资源​

练习​