Estoy intentando realizar un test de un componente de React Native con Jest + React Library.
Según documentaciones, he creado un apartado de test-utils.js para manejar renderizado y otras necesidades que sean más custom. En este caso, un renderizado con el provider de Redux.
import React from 'react';
import {Provider} from 'react-redux';
import {render} from '@testing-library/react-native';
import rootReducer from '../redux/reducers';
import store from '../redux/store';
function renderWithProviders(
ui,
{preloadedState = {}, _store = store, ...renderOptions} = {},
) {
function Wrapper({children}) {
return <Provider store={_store}>{children}</Provider>;
}
return render(ui, {wrapper: Wrapper, ...renderOptions});
}
// re-export everything
export * from '@testing-library/react-native';
// override render method
export {renderWithProviders as render};
Luego en el test, simplemente intento hacer un test básico en el que si paso datos vacíos a la prop, renderiza una view diciendo que no hay nada:
it('renders correctly with empty patient list', () => {
const patientList = [];
const {getByText} = render(<FinishStop patientList={patientList} />);
// Verificar que se muestra el texto indicando que no hay pacientes
const noPatientsText = getByText('No hay pacientes');
expect(noPatientsText).toBeDefined();
});
El problema lleva al ejecutar el test, ya que salta error y dice:
console.error
Warning: React.jsx: 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.
Check the render method of `Wrapper`.
at children (C:\Users\pesua\Workspace\siportAndroidTablet\src\utils\test-utils.js:12:21)
11 | ) {
12 | function Wrapper({children}) {
> 13 | return <Provider store={_store}>{children}</Provider>;
| ^
14 | }
15 |
16 | return render(ui, {wrapper: Wrapper, ...renderOptions});
at printWarning (node_modules/react/cjs/react-jsx-runtime.development.js:87:30)
at error (node_modules/react/cjs/react-jsx-runtime.development.js:61:7)
at jsxWithValidation (node_modules/react/cjs/react-jsx-runtime.development.js:1244:7)
at jsxWithValidationDynamic (node_modules/react/cjs/react-jsx-runtime.development.js:1301:12)
at Wrapper (src/utils/test-utils.js:13:12)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6351:18)
at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9855:13)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11312:16)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15811:12)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15745:5)
at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15717:7)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15422:20)
at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
at Object.act (node_modules/react/cjs/react.development.js:2521:11)
at act (node_modules/@testing-library/react-native/src/render-act.ts:13:16)
at render (node_modules/@testing-library/react-native/src/render.tsx:48:33)
at renderWithProviders (src/utils/test-utils.js:16:16)
at Object.<anonymous> (src/components/FinishStop/index.test.js:60:11)
console.error
The above error occurred in the <Wrapper> component:
at children (C:\Users\pesua\Workspace\siportAndroidTablet\src\utils\test-utils.js:12:21)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
14 | }
15 |
> 16 | return render(ui, {wrapper: Wrapper, ...renderOptions});
| ^
17 | }
18 |
19 | // re-export everything
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8661:23)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8694:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4092:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4113:9)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13232:13)
at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14330:9)
at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14316:7)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14301:3)
at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16062:5)
at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15933:5)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15454:3)
at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
at Object.act (node_modules/react/cjs/react.development.js:2521:11)
at act (node_modules/@testing-library/react-native/src/render-act.ts:13:16)
at render (node_modules/@testing-library/react-native/src/render.tsx:48:33)
at renderWithProviders (src/utils/test-utils.js:16:16)
at Object.<anonymous> (src/components/FinishStop/index.test.js:60:11)
FinishStop › renders correctly with empty patient list
Element 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.
Check the render method of `Wrapper`.
14 | }
15 |
> 16 | return render(ui, {wrapper: Wrapper, ...renderOptions});
| ^
17 | }
18 |
19 | // re-export everything
at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17518:17)
at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17544:15)
at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5813:23)
at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5871:35)
at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9096:28)
at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9915:5)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11312:16)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15811:12)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15745:5)
at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15717:7)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15422:20)
at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
at Object.act (node_modules/react/cjs/react.development.js:2521:11)
at act (node_modules/@testing-library/react-native/src/render-act.ts:13:16)
at render (node_modules/@testing-library/react-native/src/render.tsx:48:33)
at renderWithProviders (src/utils/test-utils.js:16:16)
at Object.<anonymous> (src/components/FinishStop/index.test.js:60:11)
Llevo un buen rato intentando descubrir por qué me está fallando el Provider, como si estuviera mal importado, pero en realidad no lo está y no sé por dónde seguir con este error.
Actualización: Por mucho que reviso, parece ser que a la hora de realizar tests, Provider es undefined, y la importación es correcta.