如何在Jest测试中为不同用例替换命名导入的config值？

假设有一个依赖包some-config-package，导出名为config的命名导出：

export const config = {
  featureToggles: {
    someFeatureToggle: false
  }
};

React组件ComponentAB.js根据该配置开关渲染不同内容：

import React from "react";
import { config } from 'some-config-package';

import A from './A';
import B from './B';

function SomeComponent() {
  console.log('config.featureToggles.someFeatureToggle', config.featureToggles.someFeatureToggle);

  return config.featureToggles.someFeatureToggle ? <A /> : <B />;
}

尝试编写测试代码ComponentAB.test.js验证不同开关值下的渲染结果：

import React from "react";
import { render, screen } from "@testing-library/react";

import { config } from 'some-config-package';

import ComponentAB from './ComponentAB.js';

jest.mock("some-config-package");

describe("ComponentAB", () => {
  it.each([
    ['should show A when someFeature is toggled on', true],
    ['should show B when someFeature is toggled off', false]
  ])('%s', (_, someFeatureToggle) => {
    config.featureToggles = {
      someFeatureToggle,
    };

    render(<ComponentAB />);
    
    if (someFeatureToggle === true) {
      expect(screen.getByRole('heading', { name: /Component A/i })).toBeInTheDocument();
    }

    if (someFeatureToggle === false) {
      expect(screen.getByRole('heading', { name: /Component B/i })).toBeInTheDocument();
    }
  });
});

但测试无法正常工作：组件中的console.log输出undefined而非预期的true/false，第一个测试用例失败，第二个因undefined和false均为假值而误通过。

请问这种需求是否可行？若可行该如何实现？若不可行，应采用何种方式测试不同场景？实际场景逻辑更复杂，此示例为核心问题。

可行，正确实现方式如下 #

问题出在jest.mock("some-config-package")的默认行为上——它会自动将模块的导出替换为mock函数，而非保留原有的对象结构，导致组件中读取的config并非你期望的可修改对象。可以通过以下方式解决：

方法1：手动mock模块导出，提供可修改的config对象 #

修改测试文件中的jest.mock调用，用工厂函数返回自定义的mock结构，确保config是一个可修改的对象：

import React from "react";
import { render, screen } from "@testing-library/react";

import { config } from 'some-config-package';
import ComponentAB from './ComponentAB.js';

// 手动mock模块，返回包含可修改config对象的结构
jest.mock('some-config-package', () => ({
  config: {
    featureToggles: {}
  }
}));

describe("ComponentAB", () => {
  // 每个测试前重置config状态，避免测试间污染
  beforeEach(() => {
    config.featureToggles = { someFeatureToggle: false };
  });

  it.each([
    ['should show A when someFeature is toggled on', true],
    ['should show B when someFeature is toggled off', false]
  ])('%s', (_, someFeatureToggle) => {
    // 修改config对象的目标属性
    config.featureToggles.someFeatureToggle = someFeatureToggle;

    render(<ComponentAB />);
    
    if (someFeatureToggle) {
      expect(screen.getByRole('heading', { name: /Component A/i })).toBeInTheDocument();
    } else {
      expect(screen.getByRole('heading', { name: /Component B/i })).toBeInTheDocument();
    }
  });
});

方法2：使用jest.spyOn动态修改属性（适合保留部分默认值的场景） #

如果需要保留原模块的部分默认配置，可通过jest.spyOn覆盖目标属性：

import React from "react";
import { render, screen } from "@testing-library/react";

import * as configPackage from 'some-config-package';
import ComponentAB from './ComponentAB.js';

describe("ComponentAB", () => {
  it.each([
    ['should show A when someFeature is toggled on', true],
    ['should show B when someFeature is toggled off', false]
  ])('%s', (_, someFeatureToggle) => {
    // 用spyOn覆盖config的目标属性
    jest.spyOn(configPackage.config.featureToggles, 'someFeatureToggle', 'get')
      .mockReturnValue(someFeatureToggle);

    render(<ComponentAB />);
    
    if (someFeatureToggle) {
      expect(screen.getByRole('heading', { name: /Component A/i })).toBeInTheDocument();
    } else {
      expect(screen.getByRole('heading', { name: /Component B/i })).toBeInTheDocument();
    }

    // 清理mock，避免影响其他测试
    jest.restoreAllMocks();
  });
});

进阶优化：用React Context解耦配置（推荐复杂场景） #

对于逻辑更复杂的场景，建议将config通过React Context注入组件，测试时只需提供不同的Context值即可，无需mock第三方模块，更符合React的解耦设计：

// 新增ConfigContext.js
import { createContext, useContext } from 'react';

export const ConfigContext = createContext();

export function useConfig() {
  return useContext(ConfigContext);
}

// 修改ComponentAB.js
import React from "react";
import { useConfig } from './ConfigContext';

import A from './A';
import B from './B';

function SomeComponent() {
  const config = useConfig();
  console.log('config.featureToggles.someFeatureToggle', config.featureToggles.someFeatureToggle);

  return config.featureToggles.someFeatureToggle ? <A /> : <B />;
}

// 测试文件修改
import React from "react";
import { render, screen } from "@testing-library/react";
import { ConfigContext } from './ConfigContext';

import ComponentAB from './ComponentAB.js';

describe("ComponentAB", () => {
  it.each([
    ['should show A when someFeature is toggled on', true],
    ['should show B when someFeature is toggled off', false]
  ])('%s', (_, someFeatureToggle) => {
    render(
      <ConfigContext.Provider value={{
        featureToggles: { someFeatureToggle }
      }}>
        <ComponentAB />
      </ConfigContext.Provider>
    );
    
    if (someFeatureToggle) {
      expect(screen.getByRole('heading', { name: /Component A/i })).toBeInTheDocument();
    } else {
      expect(screen.getByRole('heading', { name: /Component B/i })).toBeInTheDocument();
    }
  });
});

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