Testcafe RequestMock非字符串过滤器致请求Pending问题咨询

1. 正确使用对象过滤器匹配URL与请求方法 #

Testcafe的onRequestTo对象过滤器要求严格匹配请求属性，尤其是method字段必须为大写HTTP方法（与浏览器实际发送的请求一致）。比如区分同URL的POST创建和PATCH编辑请求：

import { RequestMock } from 'testcafe';

const apiMock = RequestMock()
  // 匹配POST请求到/api/users
  .onRequestTo({
    url: '/api/users',
    method: 'POST'
  })
  .respond({ id: 1, name: 'Test User' }, 201)
  // 匹配PATCH请求到/api/users/xxx（带ID的编辑接口）
  .onRequestTo({
    url: /\/api\/users\/\d+/,
    method: 'PATCH'
  })
  .respond({ success: true }, 200);

如果请求是完整域名路径，可拆分hostname和pathname精准匹配：

.onRequestTo({
  hostname: 'your-rails-api-domain.com',
  pathname: '/api/users',
  method: 'POST'
})

2. 正则+withMethod简化多方法匹配 #

用正则匹配URL范围，再通过.withMethod()限定请求方法，写法更简洁不易出错：

const apiMock = RequestMock()
  // 匹配所有/api/users开头的POST请求
  .onRequestTo(/\/api\/users.*/)
  .withMethod('POST')
  .respond({ success: true }, 201)
  // 匹配带用户ID的PATCH编辑请求
  .onRequestTo(/\/api\/users\/\d+/)
  .withMethod('PATCH')
  .respond({ success: true }, 200);

3. 谓词函数的正确写法（避免Pending核心） #

如果必须用谓词函数，务必同步返回布尔值，禁止在函数内写异步逻辑（Testcafe不支持异步谓词）。同时要准确判断请求的url和method：

const apiMock = RequestMock()
  .onRequestTo(req => {
    // 同步判断：URL包含/api/users且为POST方法
    return req.url.includes('/api/users') && req.method === 'POST';
  })
  .respond({ id: 2 }, 201)
  .onRequestTo(req => {
    // 匹配带ID的PATCH编辑请求
    return /\/api\/users\/\d+/.test(req.url) && req.method === 'PATCH';
  })
  .respond({ success: true }, 200);

4. 用RequestLogger排查匹配失败原因 #

如果还是出现Pending，先通过RequestLogger捕获请求详情，确认实际的URL、方法是否和过滤器匹配：

import { RequestLogger } from 'testcafe';

const apiLogger = RequestLogger(/\/api\/users.*/, {
  logRequestHeaders: true,
  logRequestBody: true
});

fixture('User E2E Tests')
  .page('http://your-react-app-url.com')
  .requestHooks(apiLogger, apiMock);

test('verify user creation mock', async t => {
  // 触发创建用户操作
  await t.click('#create-user-btn');
  
  // 打印实际请求的URL和方法，排查匹配问题
  console.log('实际请求URL:', apiLogger.requests[0].url);
  console.log('实际请求方法:', apiLogger.requests[0].method);
  
  // 验证请求是否被正确mock
  await t.expect(apiLogger.requests[0].response.statusCode).eql(201);
});

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