如何Mock并测试嵌套函数中的onConfirm内部方法？

针对你给出的代码场景，这里提供一套简洁且覆盖完整逻辑的Mock测试方案，以Jest为例（Vitest用法基本一致）：

核心思路 #

我们不需要Mockconfirmation.open的内部逻辑，只需要捕获它接收的onConfirm回调函数，然后手动触发这个回调，再断言foo和bar方法的调用情况即可。这样既避免了依赖外部组件的实现细节，又能精准测试回调的执行逻辑。

测试步骤与代码示例 #

假设你的组件类如下：

class TargetComponent {
  confirmation: { open: (config: { onConfirm: () => void }) => void };
  foo: (result: string) => void;
  bar: (param: string) => string;

  constructor() {
    this.confirmation = { open: () => {} };
    this.foo = () => {};
    this.bar = (val) => val;
  }

  confirm(): void {
    this.confirmation.open({
      onConfirm: () => this.foo(this.bar('baz'))
    })
  }
}

对应的测试代码：

describe('TargetComponent', () => {
  test('onConfirm回调应正确调用foo和bar', () => {
    // 1. Mock需要验证的内部方法和外部依赖
    const mockBar = jest.fn().mockReturnValue('处理后的baz');
    const mockFoo = jest.fn();
    const mockOpen = jest.fn();

    // 实例化组件并替换Mock方法
    const component = new TargetComponent();
    component.bar = mockBar;
    component.foo = mockFoo;
    component.confirmation.open = mockOpen;

    // 2. 触发confirm方法，让confirmation.open被调用
    component.confirm();

    // 3. 从open的调用参数中提取onConfirm回调
    const onConfirm = mockOpen.mock.calls[0][0].onConfirm;

    // 4. 手动触发onConfirm回调
    onConfirm();

    // 5. 断言方法调用是否符合预期
    expect(mockBar).toHaveBeenCalledWith('baz'); // 验证bar的参数正确
    expect(mockFoo).toHaveBeenCalledWith('处理后的baz'); // 验证foo接收了bar的返回值
  });
});

方案优势 #

• 低耦合：不依赖confirmation组件的内部实现，测试稳定性更高，即使confirmation更新实现逻辑，只要它还是通过open接收onConfirm回调，测试就不会失效。
• 高覆盖：完整覆盖了onConfirm回调的执行流程，验证了bar的参数传递和foo的输入值，确保业务逻辑正确。
• 简洁直观：不需要复杂的Mock嵌套，步骤清晰，便于维护。

注意事项 #

• 如果bar或foo是私有方法，在TypeScript中可以通过(component as any).bar的方式进行Mock（不过更建议尽量测试公共API，私有方法可以通过公共行为间接验证）。
• 若confirmation是通过依赖注入传入的，测试时直接注入Mock实例即可，无需手动替换组件属性。

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