Home > Mobile >  Testing Redux with testing library getting this error: Warning: React.createElement: type is invalid
Testing Redux with testing library getting this error: Warning: React.createElement: type is invalid

Time:09-13

I am trying to test my React Native App redux store using Testing library, I followed the Redux documentation to create a Wrapper provider in order to pass the store to the component to test, in this case my LoginScreen component. But I am getting the following 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. Check the render method of `LoginScreen`.
    at LoginScreen (/Users/macbookpro/Proyectos/Personales/antifappi/src/screens/notauthenticated/LoginScreen.tsx:41:22)
    at Provider (/Users/macbookpro/Proyectos/Personales/app/node_modules/react-redux/lib/components/Provider.js:19:3)
    at Wrapper (/Users/macbookpro/Proyectos/Personales/app/src/utils/test-utils.tsx:29:22)

This is my "test-utils.tsx" that I copy from redux documentation:

export const renderWithProviders = (
  ui: React.ReactElement,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  }: ExtendedRenderOptions = {}
) => {

  const Wrapper = ({ children }: PropsWithChildren<{}>): JSX.Element => {

    return (
            <Provider store={ store }>
              { children }
            </Provider>
    )
  }

  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions }) 
  
}

and this is my test for loginscreen:

describe("Login Screen", () => {
    describe("layout", () => {
        it("render correctly", async () => {

            component = renderWithProviders(<LoginScreen />, { preloadedState: {
                auth: {
                    status: 'checking',
                    loadingAuth: false,
                    user: null,
                    message: '',
                    token: null,
                    goSettingUp: false,
                }
            }, store: store});
            console.log(component);

            expect(component).toBeDefined();
});
});
});

I hope some can come across with some advice to solve this issues that I have days trying to solve it. Thanks.

CodePudding user response:

I found the solution. I was mocking reanimated twice, I just deleted one of them and now is working fine. So be careful of what and how you are mocking.

  • Related