Tener este componente React:
import { Meta } from '@storybook/react'; export function MyExample() { return ( <div>my example</div> ); } export default { component: MyExample, title: 'MyExample' } as Meta;Quiero escribir algunas pruebas unitarias para ello, así que este es el enfoque:
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(); }); });Sin embargo, tiene un error. Aparece una línea roja debajo del argumento del render que indica:
El tipo de elemento JSX 'MyExample' no tiene ninguna construcción o firma de llamada
Alguna idea de cómo solucionar este problema? Comento que está hecho con Typescript.
MyExample en su código no se exporta de forma predeterminada.
Por lo tanto, debe cambiar su declaración de importación a:
import { MyExample } from './MyExample.stories' // ... Es posible que desee utilizar la import del complemento eslint y la regla import/no-named-as-default para evitar este tipo de error en el futuro.