React单元测试报错：导入Storybook组件时JSX元素无构造或调用签名

你的Story文件存在两个导出内容：

• 命名导出：MyExample 是你写的React组件本身
• 默认导出：是Storybook要求的元配置对象，类型为Meta，仅包含组件的配置信息，不是可执行的组件函数。

你在测试代码中使用默认导入拿到的是这个元配置对象，自然无法作为JSX组件渲染，就会触发「没有构造或调用签名」的TS报错。

直接修改测试文件的导入语句，改为导入命名导出的组件即可：

import { render } from '@testing-library/react';
// 将默认导入改为命名导入
import { MyExample } from './MyExample.stories';

describe('MyExample', () => {
  it('should render MyExample successfully', () => {
    const { baseElement } = render(<MyExample />);
    expect(baseElement).toBeTruthy();
  });
});

修改后TS报错会直接消失，测试可正常运行。

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