在Cypress中替换React项目里的showCustomData变量值

1. Mock Statsig的Gate（推荐） #

测试时应隔离外部依赖，Mock Statsig的返回值是最标准的做法，完全不污染业务代码。

拦截Statsig API请求 #

如果项目通过API获取Statsig配置，直接在Cypress中拦截请求并返回自定义Gate值：

// 在Cypress测试用例或beforeEach中
cy.intercept('GET', '**/statsig/v1/gates/**', (req) => {
  req.reply({
    gates: {
      shipments_custom_toggle: { value: false } // 对应showCustomData为true
    }
  });
});

直接修改Statsig SDK状态 #

如果Statsig SDK已挂载到window，可以直接在Cypress中更新Gate值：

cy.window().then((win) => {
  win.statsig.updateGate('shipments_custom_toggle', false);
});

这种方式完全遵循测试隔离原则，业务代码无需任何修改。

2. 安全使用window.Cypress标识 #

你之前的做法是可行的，只要做好边界判断，不会影响生产环境：

const { value: gateValue } = useGate("shipments_custom_toggle");
// 仅在Cypress测试环境强制覆盖，生产环境自动忽略
const showCustomData = window.Cypress ? true : !gateValue;

window.Cypress仅在Cypress运行时存在，生产环境该变量为undefined，不会触发强制逻辑，安全性有保障。缺点是业务代码混入了测试相关逻辑，适合快速验证场景。

3. 通过全局变量/环境变量注入 #

Cypress注入全局变量 #

在Cypress访问页面时，注入测试专用全局变量：

cy.visit('/', {
  onBeforeLoad(win) {
    win.__TEST_FORCE_SHOW_CUSTOM_DATA__ = true;
  }
});

React代码中读取该变量：

const { value: gateValue } = useGate("shipments_custom_toggle");
const showCustomData = window.__TEST_FORCE_SHOW_CUSTOM_DATA__ ?? !gateValue;

构建环境变量传递 #

如果使用Create React App等支持环境变量的框架，启动Cypress时传递带前缀的环境变量：

REACT_APP_FORCE_SHOW_CUSTOM_DATA=true npx cypress open

React代码中读取：

const { value: gateValue } = useGate("shipments_custom_toggle");
const showCustomData = process.env.REACT_APP_FORCE_SHOW_CUSTOM_DATA === 'true' ? true : !gateValue;

这种方式将测试配置与业务代码解耦，生产环境不会残留测试逻辑。

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