React测试中Mock子组件出现"Nothing was returned from render"错误求助

问题场景 #

测试父组件时，通过__mocks__文件夹Mock子组件，Mock文件代码如下：

// __mocks__/ChildComponent.tsx
import React from 'react'
const ChildComponent = () => {
  return <div>ChildComponent Mock</div>
}
export default ChildComponent

测试文件代码：

// ParentComponent.test.tsx
import ParentComponent from '@/components/ParentComponent'
import { render, screen } from '@testing-library/react'

jest.mock('@/components/ChildComponent')
it('renders correctly', () => {
  render(<ParentComponent />)
})

运行测试时出现错误：

ChildComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

可能的原因及解决方法 #

1. 检查__mocks__文件夹的位置是否正确 #

Jest自动Mock的规则要求__mocks__文件夹必须和被Mock的组件处于同一目录层级。比如原组件路径是src/components/ChildComponent.tsx，那么Mock文件的路径必须是src/components/__mocks__/ChildComponent.tsx，不能把__mocks__放在其他目录（比如项目根目录）。

2. 验证Jest对别名@的解析配置 #

如果你的项目用了@作为src目录的别名，需要确保Jest的配置文件（jest.config.js或jest.config.ts）里正确配置了moduleNameMapper，否则Jest无法找到Mock文件，会 fallback 到原组件（如果原组件有问题就会报错）：

module.exports = {
  // 其他配置...
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
}

3. 手动指定Mock实现（绕过自动Mock规则） #

如果自动Mock的规则不生效，可以直接在测试文件里手动定义Mock，避免依赖__mocks__文件夹：

// ParentComponent.test.tsx
import ParentComponent from '@/components/ParentComponent'
import { render, screen } from '@testing-library/react'

// 直接在测试里Mock子组件
jest.mock('@/components/ChildComponent', () => {
  return () => <div>ChildComponent Mock</div>
})

it('renders correctly', () => {
  render(<ParentComponent />)
  // 可以加个断言验证Mock是否生效
  expect(screen.getByText('ChildComponent Mock')).toBeInTheDocument()
})

4. 排查Mock是否真正生效 #

可以在测试文件里导入被Mock的组件并打印，确认是否拿到了正确的Mock函数：

import ChildComponent from '@/components/ChildComponent'

console.log(ChildComponent)
// 如果输出的是你定义的Mock函数，说明生效；如果是原组件，说明Mock没被正确加载

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