如何使用Testing Library验证React组件交互后子组件接收的props是否正确

报错核心原因 #

你遇到的报错通常由两个常见问题导致：

1. jest.mock的返回值和子组件的导出方式不匹配：如果你的ChartMenu是默认导出（export default ChartMenu），你原来的mock写法直接返回函数，没有挂载到default属性上，导致导入的ChartMenu不是你生成的mock函数，自然无法捕获调用参数，出现"调用参数为空数组"的报错。
2. 断言时没有匹配React的传参规则：React调用函数组件时会传入两个参数，第一个是props对象，第二个是ref对象，如果只校验第一个props参数、没有给第二个参数占位，也会出现参数不匹配的报错。

正确实现步骤 #

1. 按导出类型正确mock子组件 #

情况1：子组件为默认导出

// 注意返回结构要匹配ES模块默认导出的格式
jest.mock('./path-to/ChartMenu', () => ({
  __esModule: true, // 避免ES模块导入的兼容问题
  default: jest.fn(() => null)
}))

情况2：子组件为命名导出

// 比如子组件写法为export const ChartMenu = () => {}
jest.mock('./path-to/ChartMenu', () => ({
  __esModule: true,
  ChartMenu: jest.fn(() => null)
}))

2. 编写测试用例 #

import { render, screen, fireEvent } from '@testing-library/react'
import ChartMenu from './path-to/ChartMenu' // 导入mock后的子组件
import ParentComponent from './path-to/parent-component'

// 每个用例执行前清空mock调用记录，避免用例间干扰
beforeEach(() => {
  jest.clearAllMocks()
})

test('点击加号后ChartMenu接收到opened=true的prop', () => {
  render(<ParentComponent />)
  
  // 触发点击事件
  fireEvent.click(screen.getByText('+'))
  
  // 匹配参数时要给第二个ref参数占位
  expect(ChartMenu).toHaveBeenCalledWith(
    expect.objectContaining({
      opened: true,
      close: expect.any(Function)
    }),
    expect.anything() // 不需要校验ref的话用这个占位即可
  )
})

交互测试最佳实践 #

1. 优先测试行为而非实现：不建议mockuseState这类React内部API，这类测试对组件重构的兼容性极差，比如你后续把状态提升到父组件或者换成useReducer，测试直接就会失效，而校验子组件props的方式属于对外行为测试，组件内部状态管理逻辑怎么改都不会影响测试结果。
2. 对于依赖复杂的子组件，如果不想mock，可以用MSW模拟接口请求、用redux的Provider包裹测试组件传入模拟状态，直接渲染真实子组件测试，测试置信度会更高。

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