Unit test in React requires construct or call signatures

Having this React component:

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

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

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

I want to write some unit tests for it, so this is the approach:

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

However, it has an error. A red line appears under the render’s argument stating:

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

Any ideas how to fix this? I mention that it is done with Typescript.

>Solution :

MyExample in your code is not exported as default.

So you need to change your import statement to:

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

You may want to use the eslint plugin import and the rule import/no-named-as-default to prevent this kind of error in the future.