Next 全栈之 API 测试：Supertest 与 MSW 双雄记 🥷⚔️

在软件工程的江湖里，API 测试 向来是一门必修的武学。它的地位就如同武侠小说里的"轻功"：平时看似不炫技，但一旦失手，整套招式都会摔个狗吃屎。今天我们就来聊聊 Next.js 全栈开发中的 API 测试 ，并请出测试江湖的两位重量级人物------Supertest 与 MSW。

1. 为什么要在 Next.js 中做 API 测试？ 🔍

Next 作为一门"全栈一体机"，不仅能写页面，还能写 API 路由。但凡有 API，就离不开测试，原因如下：

验证逻辑正确性 ：比如 /api/login 不能随便放人进来，不然你家服务器可成了免费宾馆。
保障协作：前后端分离开发时，API 是两拨程序员之间的"血书契约"，必须验证它说到做到。
防回归：上线后改了一行不起眼的代码，可能昨天还能跑通的接口，今天返回的就是"无情的 500 错误"。

一句话总结：不写测试，等同于把 Bug 当彩蛋送给用户。

2. Supertest：一拳打在 API 的命门上 👊

Supertest 是测试 Node.js HTTP 服务器的利器，它的定位是"拳头"，直接出击后端的 API 路由。

使用场景

测试 Next.js API Route。
不依赖前端，只用最纯粹的请求与响应来检验后端逻辑。

安装

css 复制代码

npm install --save-dev supertest jest

一个小例子

假设你在 /pages/api/hello.js 写了一个很官方的路由：

javascript 复制代码

export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API" })
}

对应的测试可以这样写：

javascript 复制代码

import request from "supertest"
import handler from "../pages/api/hello"  // 引入你的 handler
import { createServer } from "http"

describe("API /hello", () => {
  let server

  beforeAll(() => {
    server = createServer((req, res) => handler(req, res))
  })

  it("should return a hello message", async () => {
    const response = await request(server).get("/api/hello")
    expect(response.status).toBe(200)
    expect(response.body).toEqual({ message: "Hello from API" })
  })
})

🧐 本质上，Supertest 就是偷偷扮演用户，发起 HTTP 请求，把 API 的底裤扒拉个干净。

3. MSW：江湖中的幻术师 🪄

如果 Supertest 是拳头，那 MSW（Mock Service Worker） 更像是"幻术师"。

它的核心思想是：在浏览器或 Node 测试环境里，劫持请求，给前端"画个饼" 。

这样就算后端 API 还没有 ready，你依然能在前端愉快地开发或测试。

使用场景

前端测试：测试 React 组件时，不依赖真实 API。
模拟网络交互：构建假响应，以保证 UI 的可测试性。

安装

css 复制代码

npm install msw --save-dev

例子：假装有个用户接口

拦截 /api/user 请求：

javascript 复制代码

// mocks/handlers.js
import { rest } from "msw"

export const handlers = [
  rest.get("/api/user", (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ username: "Neo", role: "Chosen One" })
    )
  })
]

测试 React 组件时，你的组件就能收到假的用户数据，而不用真的等后端上线。

4. Supertest vs MSW：双雄对比 🐉🐅

特点	Supertest 🥊	MSW 🎭
目标对象	后端 API handler	前端请求 (fetch/axios)
运行环境	Node.js 测试	浏览器 / Node 测试
使用方式	直接发请求到 API	拦截 HTTP 请求并返回假数据
最适合的场景	验证 API 路由逻辑	测试 UI 在不同数据下的表现

一句话总结：

Supertest 是"武力值"担当：打 API 逻辑的真功夫。
MSW 是"心灵幻术"专家：前端世界里，虚拟真实感。

5. 如何在 Next 全栈项目中融会贯通？ 🧘‍♂️

很多开发者会这么搭配：

后端 API 路由 → 用 Supertest 保证逻辑健壮。
前端 UI 测试 → 用 MSW 模拟接口响应，保障 UI 正常显示。

就像金庸小说里练"左右互搏术"，两只手各练一套武功，最后合体无敌。

6. 给灵魂一点图画 🎨

scss 复制代码

   Supertest (强硬派)         MSW (幻术派)
          🥊 ----------------- 🎭
             \               /
              \             /
               \           /
              Next.js 全栈测试

7. 彩蛋小结 🥚

Supertest：直捣黄龙，测试 API 的血肉之躯。
MSW：虚拟真实，前端世界的"假数据艺术家"。
双剑合璧：Next.js 全栈项目里，你既能保证 API 的逻辑靠谱，又能确保 UI 面对风吹草动依然淡定从容。

所以，下次写代码的时候，不妨把你的 Supertest 和 MSW 当成左右手。就像玩《街头霸王》，一边波动拳，一边升龙拳，什么 Bug 都挡不住你啦！ 🚀