如何使用react testing library正确mock React子组件？

报错原因 #

• jest.mock的工厂函数返回值代表整个模块的导出结果，你的代码里子组件是命名导出，但mock时直接返回字符串，没有匹配原模块的导出结构，导致解构导入import {Child1} from './child1'拿到的值为undefined，React渲染undefined作为组件类型时就会触发该警告。
• 你写了两次针对./child1的mock，没有对./child2做任何mock操作，所以Child2导入后也会是未定义状态。
• 即使对齐了导出结构，也不能直接用普通字符串作为组件的值，React要求自定义组件必须是函数或者类。

正确Mock方案 #

基础空组件Mock #

对齐原模块的命名导出结构，返回一个简单的函数组件即可：

jest.mock('./child1', () => ({
  Child1: () => <div data-testid="child1-mock" />
}))
jest.mock('./child2', () => ({
  Child2: () => <div data-testid="child2-mock" />
}))

添加data-testid是为了方便你在测试中验证子组件是否被正常渲染。

可验证Props的Mock #

如果需要测试父组件是否给子组件传递了正确的属性，可以用jest.fn()包裹mock组件：

jest.mock('./child1', () => ({
  Child1: jest.fn(() => <div data-testid="child1-mock" />)
}))
// 测试用例中可以直接验证调用参数
import { Child1 } from './child1'
test('父组件传递正确参数给Child1', () => {
  render(<ParentComponent />)
  expect(Child1).toHaveBeenCalledWith(
    expect.objectContaining({ yourProp: '期望的参数值' }),
    expect.anything()
  )
})

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