如何在Next.js中为Playwright模拟服务端API响应

你当前使用的page.route是Playwright专门用来拦截浏览器客户端发起的请求的方法，所以只能模拟前端页面调用的API。如果要模拟Node.js服务端自身发起的API请求（比如服务端代码里用axios/fetch调用外部服务），需要用专门针对Node.js进程的拦截工具，比如Nock。

下面分场景给出具体解决方案：

场景1：拦截服务端内部发起的HTTP请求 #

Nock库可以拦截Node.js进程中所有向外发起的HTTP请求，完美适配服务端API模拟需求：

1. 先安装Nock：

npm install nock --save-dev

2. 编写拦截代码（放在服务启动前或测试用例开头）：

import nock from 'nock';

// 拦截指向https://customisation域名的GET /steps请求
nock('https://customisation')
  .get('/steps')
  .reply(200, { data: 'mocked response' });

只要服务端代码里发起的请求匹配这个规则，就会返回你预设的模拟数据，不管是在路由处理、中间件还是其他服务逻辑里调用的。

场景2：服务端渲染（SSR）场景下的API模拟 #

如果你的Node.js应用是SSR模式，服务端渲染时会发起API请求，同样可以用Nock提前设置拦截规则，确保渲染过程中的请求被拦截：

// 在启动SSR服务前设置Nock规则
nock('https://customisation')
  .persist() // 持久化规则，拦截所有匹配的请求
  .get('/steps')
  .reply(200, { data: 'mocked SSR response' });

// 然后启动你的SSR服务
await startServer();

场景3：直接测试Node.js服务端API #

如果你的需求是测试自己的Node.js服务端API（而非前端页面），更推荐用Supertest结合Nock：

import request from 'supertest';
import nock from 'nock';
import app from './path-to-your-express-app';

test('测试服务端API依赖外部接口的场景', async () => {
  // 模拟服务端依赖的外部API
  nock('https://customisation')
    .get('/steps')
    .reply(200, { data: 'mocked response' });

  // 调用自己的服务端API
  const res = await request(app).get('/your-server-api-endpoint');
  
  // 断言返回结果符合预期
  expect(res.statusCode).toBe(200);
  expect(res.body).toEqual(/* 你的预期数据结构 */);
});

注意事项 #

• Nock的拦截规则是顺序执行的，确保在服务端发起请求前就设置好规则。
• 如果需要拦截POST、PUT等其他请求方法，Nock也支持对应的方法（.post()、.put()等）。

内容的提问来源于stack exchange，提问作者MAYANK KUMAR