在Typescript中使用Jest模拟非默认导出子组件出现报错如何解决？

错误根因 #

1. 模拟导出结构不匹配：你的子组件使用export const命名导出，而jest.mock的回调直接返回了组件函数，相当于仅提供了默认导出的内容，导致测试文件中导入的命名导出MyChildComponent值为undefined，触发React组件类型无效的报错。
2. 测试代码存在语法错误：<ParentComponent>标签未闭合、it、describe语句缺少闭合括号，会额外导致测试运行失败。

修复步骤 #

1. 修正模拟语句 #

调整jest.mock的返回结构，匹配子组件的命名导出规则：

jest.mock('./components/MyChildComponent', () => ({
  // 和导出的组件名保持一致
  MyChildComponent: () => <span>mocked</span>
}))

注意：React组件不能直接返回字符串，需要包裹在合法的JSX标签中，避免触发返回值类型错误。如果是默认导出的子组件，只需要把属性名改为default即可。

2. 修正测试用例语法 #

describe('My parent component', () => {
  it('renders main span', () => {
    // 闭合组件标签
    render(<ParentComponent />);
    // 这里添加你的断言逻辑
  });
});

完成以上修改后即可解决该报错，测试可以正常运行。

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