mock父组件方法的核心目标是让子组件调用可控、可断言的函数，而非依赖真实逻辑；需在渲染前传入jest.fn()作为prop，验证调用次数、参数等行为，且不可mock父组件本身。

在前端组件测试中，Mock 模拟父组件方法的核心目标是：让子组件能调用一个可控的、可断言的函数，而不依赖真实父组件逻辑。这常见于 React、Vue 等框架中子组件通过 props 接收回调（如 onSubmit、onChange、onClose）的场景。

---

为什么需要 Mock 父组件方法？

• 子组件本身不负责实现业务逻辑，只负责触发和传递；
• 测试应聚焦子组件“是否正确调用了父传来的函数”，而非父组件内部怎么执行；
• 避免测试因父组件副作用（如 API 调用、状态更新）失败；
• 支持验证调用次数、参数、是否被调用等行为。

---

React 中常用做法（以 Jest + React Testing Library 为例）

• 直接传入 jest.fn() 作为 props

  test('calls onSubmit with correct data', () => {
    const mockOnSubmit = jest.fn();
    render(<loginform onsubmit="{mockOnSubmit}"></loginform>);
  
    fireEvent.click(screen.getByText('提交'));
  
    expect(mockOnSubmit).toHaveBeenCalledTimes(1);
    expect(mockOnSubmit).toHaveBeenCalledWith({ username: 'test', password: '123' });
  });

• 注意：不要 mock 父组件本身，而是 mock 它传给子组件的函数引用

  

  Wjs Uploading Video

  将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

  下载

  ✅ 正确：<child onclick="{jest.fn()}"></child>
  ❌ 错误：试图 jest.mock('../Parent') 并期望它影响子组件接收的 props

---

Vue 中（Options API 或 Composition API）的做法

• Options API（Vue 2 / Vue 3 Options）

  test('emits update:modelValue when input changes', () => {
    const mockUpdate = jest.fn();
    const wrapper = mount(MyInput, {
      propsData: {
        modelValue: '',
        'onUpdate:modelValue': mockUpdate // Vue 2 需用 .sync 或手动绑定
      }
    });
  
    wrapper.find('input').setValue('hello');
    expect(mockUpdate).toHaveBeenCalledWith('hello');
  });

• Composition API（Vue 3） + <script setup></script>

  <!-- MyButton.vue -->
  <script setup>
  const props = defineProps(['onClick']);
  </script><template><button>Click me</button>
  </template>

  // test
  const mockClick = jest.fn();
  const wrapper = mount(MyButton, {
    props: { onClick: mockClick }
  });
  await wrapper.find('button').trigger('click');
  expect(mockClick).toHaveBeenCalled();

---

关键细节提醒

• Mock 函数必须在 mount/render 前创建，确保子组件接收到的是同一个引用；
• 若子组件内部对父方法做了防错处理（如 typeof props.onClick === 'function' && props.onClick()），Mock 后仍需保证它是函数类型；
• 不要试图在子组件内部“重写”或“覆盖”父组件方法 —— 那属于重构范畴，不是测试该做的事；
• 如果父方法被深度嵌套调用（比如通过 context / provide 注入），则需 mock 对应的 provide 值或 useXXX composable 返回值。

---

补充：当父方法来自自定义 Hook 或 Context 时

• React：mock 自定义 Hook 返回值（用 jest.mock 或 jest.mock('./hooks/useParentAction') + mockReturnValue）；
• Vue：mock provide 的值，或 mock inject 返回的对象属性（如 jest.mock('vue', () => ({ inject: jest.fn().mockReturnValue({ submit: jest.fn() }) }))）；

本质不变：替换掉子组件运行时实际访问的那个函数引用，换成你可控的 mock 函数。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！