Tengo un componente que, según los datos que se carguen, representa un componente o un componente de carga:
// components/example import Component from 'components/component'; const Example = ({loaded}) => ( <> {loaded ? <Component/> : <Component.Loading/>} </> ) El componente de carga está escrito como notación de puntos, porque siento que lo hace más fácil de leer y usar. ¿Hay alguna forma de simular <Component.Loading/> en mis pruebas unitarias?
Esta fue mi mejor suposición, pero no funcionó:
// components/example.test import Example from './example' const mockedComponent = jest.fn(); jest.mock('components/component', () => ({ __esModule: true, default: () => mockedComponent(), })); const setup = () => { const utils = render(<Example loading={false} />); return { ...utils, }; }; it('Renders correctly', () => { const component = () => <>Main component</>; component.Loading = () => <>Loading component</>; mockedComponent.mockReturnValue(component); setup(); }); A Jest no le gusta esto y me dice que <Component.Loading/> no está definido.
console.error Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.Bien, mientras hacía esto, me estaba yendo de la forma en que normalmente te burlas de los componentes de reacción:
jest.mock('component/something', () => ({ __esModule: true, default: () => <>Mocked component</>, }));Esto suele funcionar, pero para el componente de notación de puntos, la sintaxis es diferente:
const component = () => <>Main component</>; component.Loading = () => <>Loading</>; jest.mock('components/component', () => ({ __esModule: true, default: component, })); Si quieres ir un paso más allá, puedes burlarte con un jest.fn() :
const mockedItemStatus = jest.fn(); const mockedItemStatusSkeleton = jest.fn(); const component = () => mockedItemStatus(); component.Loading = () => mockedItemStatusSkeleton(); jest.mock('components/component', () => ({ __esModule: true, default: component, }));Luego, en sus pruebas, puede hacer que el simulacro devuelva el componente específico que necesita:
it('Renders correctly', () => { mockedItemStatusSkeleton.mockImplementation(() => <>Loading</>); render(<Component/>) expect(mockedItemStatusSkeleton).toHaveBeenCalled(); });