如何在Jest中Mock远程React组件以覆盖errorHandler方法？

要测试MyComponent中的errorHandler是否正确调用传入的triggerLog，你可以通过Jest Mock第三方的RemoteComponent，手动触发它的errorLogCallback来验证逻辑，具体实现如下：

步骤1：Mock RemoteComponent模块 #

用Jest的jest.mock方法完全Mock掉@remote-module/remote-component，让它成为一个可追踪props的模拟组件，无需渲染实际内容。

步骤2：编写测试用例 #

创建模拟的triggerLog函数，渲染MyComponent后，获取RemoteComponent接收到的errorLogCallback，手动调用它并验证triggerLog的调用情况。

完整测试代码示例 #

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
import RemoteComponent from '@remote-module/remote-component';

// Mock第三方RemoteComponent组件
jest.mock('@remote-module/remote-component', () => jest.fn(() => null));

describe('MyComponent', () => {
  it('触发errorHandler时会调用传入的triggerLog', () => {
    // 创建模拟的triggerLog函数，追踪调用情况
    const mockTriggerLog = jest.fn();

    // 渲染MyComponent并传入模拟的triggerLog
    render(<MyComponent triggerLog={mockTriggerLog} />);

    // 从RemoteComponent的mock调用中取出errorLogCallback（即组件内的errorHandler）
    const { errorLogCallback } = (RemoteComponent as jest.Mock).mock.calls[0][0];

    // 模拟错误发生，手动调用errorLogCallback
    const testError = new Error('测试错误');
    errorLogCallback(testError);

    // 断言triggerLog是否被正确调用，参数为测试错误
    expect(mockTriggerLog).toHaveBeenCalledWith(testError);
  });
});

另一种更直观的Mock方式 #

也可以在Mock组件时直接存储接收到的props，后续直接取用：

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
import RemoteComponent from '@remote-module/remote-component';

let remoteComponentProps: Record<string, any>;

// Mock组件时存储props
jest.mock('@remote-module/remote-component', () => (props) => {
  remoteComponentProps = props;
  return null;
});

describe('MyComponent', () => {
  it('触发errorHandler时会调用传入的triggerLog', () => {
    const mockTriggerLog = jest.fn();
    render(<MyComponent triggerLog={mockTriggerLog} />);

    // 直接从存储的props中获取errorLogCallback并调用
    const testError = new Error('测试错误');
    remoteComponentProps.errorLogCallback(testError);

    expect(mockTriggerLog).toHaveBeenCalledWith(testError);
  });
});

这两种方式都能有效覆盖errorHandler的逻辑，验证当RemoteComponent触发错误回调时，MyComponent是否正确将错误传递给了triggerLog。

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