0

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.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.