如何用Enzyme测试子组件是否接收Context提供的值？

当然可行！下面我会一步步给你演示怎么实现，结合你提到的传入props作为Context部分的场景。

核心思路 #

Enzyme的mount方法可以渲染完整的组件树，我们既可以通过验证子组件的渲染结果间接确认Context传递正确，也能直接读取Provider提供的Context值，两种方式都能满足你的测试需求。

步骤1：补全示例组件代码 #

先把你提到的场景补成可运行的组件示例，方便后续测试：

import React, { createContext, useContext } from 'react';

// 创建Context实例
const MyContext = createContext();

// Context提供者组件，接收传入的store作为Context值
const MyContextProvider = ({ children, store }) => {
  return (
    <MyContext.Provider value={store}>
      {children}
    </MyContext.Provider>
  );
};

// 依赖Context的子组件
const Child = () => {
  const contextValue = useContext(MyContext);
  return <div>{contextValue.locale}</div>;
};

export { MyContextProvider, Child, MyContext };

步骤2：编写测试用例 #

这里提供两种常用的测试方式，你可以根据需求选择：

方式一：通过子组件渲染结果验证 #

这是最直观的方式——渲染Provider包裹Child的完整结构，检查Child的输出是否符合预期，间接证明Context传递正确：

import { mount } from 'enzyme';
import { MyContextProvider, Child } from './components';

describe('MyContextProvider', () => {
  it('should pass the correct locale value to Child via Context', () => {
    const testStore = { locale: 'es' };
    const wrapper = mount(
      <MyContextProvider store={testStore}>
        <Child />
      </MyContextProvider>
    );

    // 验证子组件渲染的内容是否匹配Context中的值
    expect(wrapper.find(Child).text()).toBe('es');
  });
});

方式二：直接读取Context值 #

如果你想直接验证Provider提供的Context内容，可以通过两种方式获取：

import { mount } from 'enzyme';
import { MyContextProvider, MyContext } from './components';

describe('MyContextProvider', () => {
  it('should provide the correct store via Context', () => {
    const testStore = { locale: 'es' };
    const wrapper = mount(
      <MyContextProvider store={testStore}>
        <div />
      </MyContextProvider>
    );

    // 方式1：通过Context类型直接读取
    const contextValue = wrapper.context(MyContext);
    expect(contextValue.locale).toBe('es');

    // 方式2：直接读取Provider组件的value属性
    const providerValue = wrapper.find(MyContext.Provider).prop('value');
    expect(providerValue.locale).toBe('es');
  });
});

关键注意事项 #

• 必须使用mount而非shallow：shallow只会渲染组件本身，不会处理Context的传递逻辑，也不会渲染完整的子组件树。
• 适配React版本：如果使用React 18+，需要搭配@wojtekmaj/enzyme-adapter-react-18适配器，确保Enzyme能正常工作。
• 类组件场景：如果你的Provider是类组件，验证逻辑类似，只是读取Context的方式可能变成wrapper.instance().context。

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