Vitest：在React消费组件中Mock自定义useContext的Provider

核心原因 #

你遇到的问题是因为模块mock的覆盖范围不完整，或者路径解析、自定义渲染逻辑导致SomeConsumer导入的useSomeContext没有被mock文件替换。下面是几种可行的解决方式：

1. 严格对齐模块导入路径 #

确保测试文件中vi.mock的路径，和SomeConsumer.tsx里导入useSomeContext的路径完全一致。

比如如果SomeConsumer里的导入是：

import { useSomeContext } from '../providers/SomeContextProvider'

那测试文件里的vi.mock必须用相同的相对路径：

vi.mock('../providers/SomeContextProvider');

如果用绝对路径，要确保项目的tsconfig.json或Vitest配置中的paths规则在测试环境中正常生效，避免路径解析不一致导致mock未覆盖。

2. 排查自定义customRender的默认包裹逻辑 #

如果你的customRender函数内部默认包裹了原始的SomeContextProvider，那即使你在测试代码里用了mock的Provider，也会被内部的原始Provider覆盖。

解决办法：

• 修改customRender，允许传入自定义的Provider组件来替换默认的全局Provider；
• 或者在测试中直接使用React Testing Library的原生render方法，跳过自定义render的默认包裹逻辑。

3. 直接mockuseSomeContext函数（推荐方案） #

不需要维护__mocks__文件夹，直接在测试中mock目标函数的返回值，这种方式更灵活：

// SomeConsumer.test.tsx
import SomeConsumer from 'SomeConsumer.tsx';
import { useSomeContext } from 'providers/SomeContextProvider';
import { customRender } from 'test/utils';

// 精准mock useSomeContext，保留其他导出（如果需要）
vi.mock('providers/SomeContextProvider', () => ({
  ...vi.importActual('providers/SomeContextProvider'),
  useSomeContext: vi.fn(() => 'someValue')
}));

describe('SomeConsumer', function () {
  it('should match snapshot with test value', () => {
    // 无需额外包裹Provider，直接渲染组件即可
    const { asFragment } = customRender(<SomeConsumer>{/***/}</SomeConsumer>);
    expect(asFragment()).toMatchSnapshot();
  });

  it('should handle dynamic context values', () => {
    // 动态修改mock返回值
    (useSomeContext as jest.Mock).mockReturnValue('test-value-2');
    const { getByText } = customRender(<SomeConsumer>{/***/}</SomeConsumer>);
    // 这里添加针对新值的断言逻辑
  });
});

4. 修复文件mock的配置（如果坚持使用） #

如果一定要用__mocks__文件，检查以下几点：

• __mocks__文件夹必须和原SomeContextProvider.tsx处于同一层级目录；
• mock文件的导出结构要和原文件完全一致：默认导出SomeContextProvider，同时导出useSomeContext函数；
• 重启Vitest或执行vi.clearAllMocks()清除缓存，确保mock文件被正确加载。

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