使用Vitest正确Mock导入对象以测试React函数的方法

首先，你的测试代码存在几个关键问题，下面是修正后的完整方案：

问题分析 #

1. vi.mock用法错误：override.js是export default导出对象，你的mock没有指定default导出，导致mock失效。
2. EnvText函数调用错误：原函数EnvText()不接受参数，你调用时传了'someText'，这会导致函数返回的合并对象被忽略，实际拿到的是undefined。
3. 模块导入顺序：Vitest的vi.mock会自动提升到模块顶部，但确保mock在导入被测试函数前执行更稳妥。

修正后的测试代码 #

import { describe, it, expect, vi } from 'vitest';

// 先mock override.js，指定default导出
vi.mock('./override.js', () => ({
  default: { someText: 'Critical' }
}));

// 再导入被测试的EnvText函数（mock已经生效）
import { EnvText } from './EnvText';

describe('EnvText function', () => {
  it('should prioritize override values over envars', () => {
    // 调用函数获取合并后的对象
    const mergedEnv = EnvText();
    // 断言override的someText覆盖了envars的值
    expect(mergedEnv.someText).toBe('Critical');
    // 额外断言未被override的属性保持原值
    expect(mergedEnv.aName).toBe('Fred');
  });
});

补充说明 #

• Object.assign的副作用问题：原函数Object.assign(envars, override)会直接修改envars原对象，可能导致测试间的状态污染。如果想避免这种情况，可以改成返回新对象：return Object.assign({}, envars, override);，这样每次调用都会生成全新的合并对象，测试独立性更强。
• 动态修改mock值：如果需要在测试用例中动态调整mock内容，可以使用vi.mocked获取mock对象后修改：

  import override from './override.js';
  
  // 在测试用例内修改mock值
  vi.mocked(override).someText = 'Urgent';
  

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