Jest error react app

Hello, friends, the app is working but I am getting this error after running Jest test:


this is the error root something with Link component:

I tried to google this error but all the posts suggest default export is the cause, but it’s not the case for me
this test code

import { render, screen } from '@src/utility/testsUtils/utils'
import Login from '@src/views/pages/authentication/Login'
import user from '@testing-library/user-event'
import {axe } from 'jest-axe'

jest.mock('react-router-dom', () => ({
  useHistory: () => ({
    push: jest.fn(),
  }),
Link: jest.fn().mockImplementation(({ children }) => {
    return children;
  }),
}))
 
describe.only('tesing Login component', () => {
  test('renders login page', async () => {
    const {debug} = render(<Login />)
    debug()
    expect(screen.getByLabelText('login-email')).toBeInTheDocument()
  })
})

// test-utils.js

import React from 'react'

import { render as rtlRender } from '@testing-library/react'

import { Provider } from 'react-redux'

// Import your own store

import {store} from '@store/storeConfig/store'

// ** Toast, Int, & ThemeColors Context

import ability from '@src/configs/acl/ability'

import { ThemeContext } from '../context/ThemeColors'

import { IntlProviderWrapper } from '../context/Internationalization'

import { AbilityContext } from '../context/Can'

function render(

  ui,

  {

    ...renderOptions

  } = {},

) {

  function Wrapper({children}) {

    return (

      <Provider store={store}>

      <AbilityContext.Provider value={ability}>

        <ThemeContext>

          <IntlProviderWrapper>

            {children}

          </IntlProviderWrapper>

        </ThemeContext>

      </AbilityContext.Provider>

    </Provider>

    )

  }

  return {

    ...rtlRender(ui, {

      wrapper: Wrapper,

      ...renderOptions,

    }),

    // adding `store` to the returned utilities to allow us

    // to reference it in our tests (just try to avoid using

    // this to test implementation details).

    store,

  }

}

// re-export everything

export * from '@testing-library/react'

// override render method

export { render }

I tried to reformat the code. It is code from two different files right? The describe.only does not seem to be closed correctly? The formatting in general makes this a little hard to read.


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

The error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Usually means you are not returning something correctly (it’s undefined). You have a lot of providers/context which we do not know anything about from looking at the code you posted.

But I honestly do not know enough about React Testing Library to be of much help here I think. Maybe someone else can be of more assistance.

ok thanks a lot :+1: :+1:

You’re mocking react-router-dom, but only implementing one of the hooks (useHistory). But what about <Link/> component that you’re using on line 84?

2 Likes

Hello jenovs you are right, but a better solution is to wrap the Login component in a MemoryRouter component, which is suggested on the react-router webpage: React Router: Declarative Routing for React.js.

render needs to receive a function React Intl | Testing Library
render(()=>)
or
render(Login )

Hi @Cuantico !

Welcome to the forum!

This lesson hasn’t been active in over 5 months and has already been marked as solved.
Please participate in more recent posts.

Thanks!