如何用Jest测试依赖React Context API的React组件？

我明白你现在的困扰——刚接触Jest和Enzyme时，Mock Context确实有点让人摸不着头脑。咱们一步步来解决你的Landing组件测试问题，同时帮你理解背后的逻辑。

问题根源 #

你的测试代码没成功，主要是因为没有正确模拟StateConsumer传递的value值。shallow渲染Landing组件后，StateConsumer是一个独立的组件，你需要手动传入模拟的connected状态，才能触发对应的渲染分支。

正确的测试代码实现 #

我们不需要复杂的Mock模块，直接通过调用StateConsumer的render prop函数，就能控制传入的上下文值。以下是完整的测试代码：

import { expect } from 'chai';
import React from 'react';
import { shallow } from 'enzyme';
import Landing from '../component/Landing/Landing';
import SignPage from '../Connection/SignPage';
import { StateConsumer } from '../api/context';

describe('<Landing />', () => {
  // 测试未登录状态：渲染SignPage
  it('renders <SignPage /> when user is not connected', () => {
    // 浅渲染Landing组件
    const wrapper = shallow(<Landing />);
    
    // 找到StateConsumer组件
    const stateConsumer = wrapper.find(StateConsumer);
    
    // 获取Consumer的children（也就是那个判断登录状态的箭头函数），传入模拟的未登录值
    const renderedContent = stateConsumer.prop('children')({ connected: false });
    
    // 浅渲染返回的内容，以便断言
    const contentWrapper = shallow(renderedContent);
    
    // 断言是否渲染了SignPage
    expect(contentWrapper.find(SignPage)).to.have.lengthOf(1);
  });

  // 测试已登录状态：渲染"connected"标题
  it('renders "connected" heading when user is connected', () => {
    const wrapper = shallow(<Landing />);
    const stateConsumer = wrapper.find(StateConsumer);
    
    // 传入已登录的模拟值
    const renderedContent = stateConsumer.prop('children')({ connected: true });
    const contentWrapper = shallow(renderedContent);
    
    // 断言h1标签的内容是否正确
    expect(contentWrapper.find('h1').text()).to.equal('connected');
  });
});

逐行解释（新手友好） #

1. 浅渲染Landing：shallow(<Landing />)只会渲染Landing组件本身，不会深入渲染StateConsumer内部，这样我们能直接操作Consumer组件。
2. 找到StateConsumer：用wrapper.find(StateConsumer)定位到Context消费者组件。
3. 调用render prop函数：StateConsumer的children属性其实是你写的那个箭头函数(value) => {...}，我们手动传入{ connected: false/true }，就能得到对应状态下的渲染结果。
4. 断言渲染结果：把返回的内容再次浅渲染，就能检查是否渲染了正确的组件/内容。

针对大量Context依赖组件的通用方法 #

如果你的应用里有很多这类组件，还可以通过Mock整个Context模块来简化测试，避免重复代码：

// 在测试文件顶部Mock Context模块
jest.mock('../api/context', () => ({
  // 定义一个可动态修改的mock值
  __mockValue: { connected: false },
  StateConsumer: ({ children }) => children(jest.requireMock('../api/context').__mockValue)
}));

describe('<Landing />', () => {
  const mockContext = jest.requireMock('../api/context');

  beforeEach(() => {
    // 重置mock值，避免测试间互相影响
    mockContext.__mockValue = { connected: false };
  });

  it('renders <SignPage /> when not connected', () => {
    const wrapper = shallow(<Landing />);
    // 因为已经Mock了Context，直接断言即可
    expect(wrapper.dive().find(SignPage)).to.have.lengthOf(1);
  });

  it('renders connected heading when logged in', () => {
    // 修改mock值为已登录
    mockContext.__mockValue.connected = true;
    const wrapper = shallow(<Landing />);
    expect(wrapper.dive().find('h1').text()).to.equal('connected');
  });
});

这种方法的好处是，所有依赖这个Context的组件测试都可以复用这个Mock，不用每次都手动调用render prop函数。

新手必懂的Jest/Mock基础 #

• Mock是什么？：简单说就是“替换”——用一个假的模块/函数代替真实的，让我们能完全控制它的输出，不用依赖真实的上下文逻辑。
• 为什么不用真实的Context？：测试应该是独立的，我们只需要测试Landing组件在不同connected值下的渲染行为，不需要启动整个Context的状态管理逻辑。

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