如何在Cypress测试前修改React应用的JSON配置文件？

核心实现思路 #

React应用依赖JSON配置文件控制行为时，可利用Cypress的beforeEach钩子在每个测试用例执行前修改配置文件内容，再让应用重新加载配置，以此覆盖不同测试场景。

1. 确认配置文件路径 #

先明确JSON配置文件在项目中的位置，比如常见的public/config.json（React会将public目录下的文件作为静态资源打包）。

2. 在BeforeEach中修改配置文件 #

使用Cypress内置的cy.writeFile命令直接写入修改后的配置，支持基于原始配置修改或直接覆盖：

基于原始配置修改

beforeEach(() => {
  cy.readFile('public/config.json').then(originalConfig => {
    // 根据测试需求修改指定配置项
    const modifiedConfig = {
      ...originalConfig,
      featureAEnabled: true,
      apiBaseUrl: 'https://test.example.com/api'
    };
    // 将修改后的配置写回文件
    cy.writeFile('public/config.json', modifiedConfig);
  });
});

直接写入全新配置

如果不需要保留原始配置的其他项，可直接写入新内容：

beforeEach(() => {
  cy.writeFile('public/config.json', {
    featureAEnabled: false,
    apiBaseUrl: 'https://staging.example.com/api'
  });
});

3. 确保应用加载最新配置 #

若应用仅在启动时读取一次配置，修改文件后需刷新页面或重新访问应用，让配置生效：

beforeEach(() => {
  // 先修改配置文件
  cy.writeFile('public/config.json', modifiedConfig);
  // 重新访问应用，禁用缓存避免读取旧配置
  cy.visit('/', { cache: 'no-store' });
});

4. 多场景测试示例 #

针对不同配置编写独立测试用例，覆盖各种业务场景：

describe('不同配置下的应用行为验证', () => {
  // 备份原始配置，测试后恢复
  let originalConfig;

  before(() => {
    cy.readFile('public/config.json').then(config => {
      originalConfig = config;
    });
  });

  afterEach(() => {
    cy.writeFile('public/config.json', originalConfig);
  });

  it('功能A开启时，对应组件正常展示', () => {
    cy.writeFile('public/config.json', { ...originalConfig, featureAEnabled: true });
    cy.visit('/', { cache: 'no-store' });
    cy.get('[data-testid="feature-a-container"]').should('be.visible');
  });

  it('功能A关闭时，对应组件不显示', () => {
    cy.writeFile('public/config.json', { ...originalConfig, featureAEnabled: false });
    cy.visit('/', { cache: 'no-store' });
    cy.get('[data-testid="feature-a-container"]').should('not.exist');
  });

  it('使用测试环境API时，请求正常返回', () => {
    cy.writeFile('public/config.json', { ...originalConfig, apiBaseUrl: 'https://test.example.com/api' });
    cy.visit('/', { cache: 'no-store' });
    
    cy.intercept('GET', 'https://test.example.com/api/user').as('getUser');
    cy.get('[data-testid="fetch-user-btn"]').click();
    cy.wait('@getUser').its('response.statusCode').should('eq', 200);
  });
});

关键注意事项 #

• 路径准确性：确保文件路径相对于Cypress配置文件（cypress.config.js）的位置，或使用绝对路径。
• 配置恢复：通过before和afterEach钩子备份、恢复原始配置，避免测试间相互影响。
• 缓存问题：访问应用时添加{ cache: 'no-store' }选项，防止浏览器读取缓存的旧配置文件。

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