使用Cypress测试时如何Stub Google OAuth？解决401未授权问题

我来帮你梳理下这个问题的解决方案——Stub Google OAuth确实是测试这类应用的正确思路，而且能完美解决你遇到的401问题，同时让你能在测试中直接操作数据库创建数据。下面分步骤给你讲具体怎么做：

一、为什么Stub Google OAuth是最优选择？ #

测试时依赖真实的Google OAuth服务会带来不少麻烦：比如Google服务可能波动、需要维护测试用的真实账号、测试流程慢且不稳定。Stub（模拟）OAuth流程能让测试环境完全隔离第三方服务，直接模拟授权成功后的状态，让后端认为请求是合法授权的，这样就能顺利调用API了。

二、具体Stub Google OAuth的实现步骤 #

1. 拦截并模拟Google OAuth的授权回调流程 #

假设你的Express后端有/auth/google/callback这个回调路由，Cypress可以拦截这个请求，直接返回模拟的授权成功响应（比如设置会话Cookie或者跳转页面）：

beforeEach(() => {
  // 拦截Google授权页面的请求，直接跳转到本地回调接口
  cy.intercept('GET', 'https://accounts.google.com/o/oauth2/v2/auth', (req) => {
    req.redirect('/auth/google/callback?code=mock-valid-auth-code');
  });

  // 拦截回调接口，模拟后端返回授权成功的状态
  cy.intercept('GET', '/auth/google/callback', (req) => {
    req.reply({
      statusCode: 302,
      headers: {
        'Location': '/dashboard', // 模拟回调后跳转的前端页面
        'Set-Cookie': 'sessionId=mock-valid-session; Path=/; HttpOnly' // 模拟后端设置的合法会话Cookie
      }
    });
  });
});

这样当你的测试用例触发登录流程时，会直接跳过真实的Google授权页面，进入模拟的授权成功状态。

2. 让后端识别模拟的授权凭证 #

如果你的后端用JWT做身份验证，那可以直接在Cypress中生成一个合法的JWT（用和后端相同的密钥），然后在API请求时带上这个Token：

// 封装生成模拟JWT的函数
const generateMockJwt = () => {
  const jwt = require('jsonwebtoken');
  // 替换成你后端的JWT密钥和用户信息
  return jwt.sign(
    { userId: 'mock-test-user-001', email: 'cypress-test@example.com' },
    process.env.JWT_SECRET,
    { expiresIn: '1h' }
  );
};

// 在测试中使用这个Token调用API
cy.request({
  method: 'POST',
  url: '/api/requests',
  headers: {
    'Authorization': `Bearer ${generateMockJwt()}`
  },
  body: {
    title: 'Cypress Test Request',
    description: 'Created via Cypress test'
  }
}).then((response) => {
  expect(response.status).to.eq(201); // 验证请求成功创建数据
});

如果后端用Session会话验证，那要确保模拟的sessionId能被后端识别，或者可以在测试环境给后端加一个专用中间件，允许测试用的会话直接通过验证。

三、直接用Cypress调用API创建数据库数据 #

有时候你不需要走前端交互流程，想直接在测试前准备数据，这时候用cy.request()直接调用API是最高效的方式，核心就是带上合法的授权凭证：

describe('API Request Management', () => {
  let authToken;

  // 测试前生成合法的模拟Token
  before(() => {
    authToken = generateMockJwt();
  });

  it('should create a new request in the database', () => {
    // 发送POST请求创建数据
    cy.request({
      method: 'POST',
      url: '/api/requests',
      headers: { 'Authorization': `Bearer ${authToken}` },
      body: {
        title: 'Test Request from Cypress',
        status: 'pending'
      }
    }).then((res) => {
      expect(res.status).to.eq(201);
      expect(res.body.id).to.exist;

      // 验证数据确实存在于数据库中（通过GET接口）
      cy.request({
        url: `/api/requests/${res.body.id}`,
        headers: { 'Authorization': `Bearer ${authToken}` }
      }).then((getRes) => {
        expect(getRes.body.title).to.eq('Test Request from Cypress');
      });
    });
  });
});

四、额外优化：测试环境专用授权中间件 #

为了让测试更顺畅，你可以在Express后端添加一个仅在测试环境生效的中间件，当请求带有特定测试头时，直接跳过OAuth验证，自动登录为测试用户：

// 后端的测试专用中间件
if (process.env.NODE_ENV === 'test') {
  app.use((req, res, next) => {
    if (req.headers['x-cypress-test']) {
      // 模拟真实授权后的用户信息，挂载到req对象上
      req.user = {
        id: 'cypress-test-user-id',
        email: 'test@example.com',
        name: 'Cypress Test User'
      };
      return next();
    }
    next();
  });
}

然后在Cypress请求时带上这个头，就不用再处理JWT或Session了：

cy.request({
  method: 'POST',
  url: '/api/requests',
  headers: { 'X-Cypress-Test': 'true' },
  body: { /* 你的请求数据 */ }
});

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