React 中的单元测试需要构造或调用签名

Question

拥有这个 React 组件：

import { Meta } from '@storybook/react';

export function MyExample() {
  return (
    <div>my example</div>
  );
}

export default {
  component: MyExample,
  title: 'MyExample'
} as Meta;

我想为它写一些单元测试，所以这是方法：

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();
  });
});

但是，它有一个错误。渲染参数下方出现一条红线，说明：

JSX element type 'MyExample' does not have any construct or call signatures

有什么解决办法吗？我提到它是用 Typescript 完成的。

Answer 1

您的代码中的

MyExample 未默认导出。

因此您需要将导入语句更改为：

import { MyExample } from './MyExample.stories'
// ...

您可能希望使用 eslint 插件 import 和规则 import/no-named-as-default 以防止将来出现此类错误。

React 中的单元测试需要构造或调用签名

Unit test in React requires construct or call signatures

javascript

unit-testing

typescript

reactjs

react-testing-library