Jest testing Element type is invalid

[nayacirdan]

I've faced with error
Error: 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 ContactUsPage.

during testing like

import { render, screen } from '@testing-library/react'
import ContactUsPage from '../pages/contact-us'
import React from 'react'

describe('Contact page', () => {
  it('renders a heading', () => {
    render(<ContactUsPage />)

    const heading = screen.getByRole('heading', {
      name: /Let’s work together/i,
    })

    expect(heading).toBeInTheDocument()
  })
})

I have no idea why and I'd appreciate for any help here

If I try to render not the next.js page but the inside component only, I receive the same error for inner components. Like in

I have
import { Row, useScreenClass } from 'react-grid-system'

Despite it is uncomfortable, I can change all destructure imports to defaults but with 3d-party libraries, there is no opportunity to do the same.

[thibautsabot]

Hello.

Could you share the content of the ContactUsPage?

It's likely that you forgot to export your component as default or that the render value is incorrect.

Thank you!

[nayacirdan]

import ContactUs from 'routes/ContactUs'
import React from 'react'
import MetaTags from 'components/MetaTags/MetaTags'

const ContactUsPage = () => {
  return (
    <>
      <MetaTags title='Contact us' />
      <ContactUs />
    </>
  )
}

export default ContactUsPage

//ContactUs.jsx

import React from 'react'
import PageLayout from 'ui-kit/Layout/PageLayout'
import Section from 'ui-kit/Layout/Section'
import ContentContainer from './ContentContainer'
import HeaderHero from './HeaderHero'
import Waves from 'components/Waves/Waves'
import styles from './ContactUs.module.scss'
import violetBottomWave from 'images/waves/contact-right-bottom-wave.svg'
import topWaveDesktop from 'images/waves/contact-top-wave.svg'

const ContactUs = () => (
  <PageLayout
    greyBackground={false}
    headerHero={<HeaderHero />}
    withWaves={false}
    wrapperClassName='page--about-us'
  >
    <Waves
      className={`${styles.topWaveDesktop} z-index-max`}
      src={topWaveDesktop}
    />
    <Section className={styles.contactUsSection} fullWidth>
      <ContentContainer />
    </Section>
    <div className={styles.contactUsMapWaves}>
      <Waves
        className={`${styles.waveBlue} z-index-max`}
        src={violetBottomWave}
      />
    </div>
  </PageLayout>
)

export default ContactUs

[thibautsabot]

Thank you!

I don't see anything wrong with the imports.
Does it work if you replace the content of ContactUs by a simple heading?

Like:

const ContactUs = () => <h1>Let’s work together</h1>

export default ContactUs

?

If so, it might by an issue with something inside the component (like PageLayout).

[nayacirdan]

If I try to test just the component, not the page, then everything is ok
Something wrong with <MetaTags title='Contact us' />
It is the component with tags like this, nothing special

inside PageLayout there is import
import { Row, useScreenClass } from 'react-grid-system' I think it is because of it I receive the error, but can't find the way to fix it

[nayacirdan]

Is there a way to change some config or something, to allow not default imports? The project is old and it has a lot of import {SomeComponent} from 'someDir'

[bb-in-hoodie]

I'm suffering from the same issue. There was no issue with Next.js 11 + Jest 27, but after I upgraded both to Next.js 12 + Jest 28 some of components fail the test with such error message. (of course there is nothing wrong in actual import statements because it has been used for a long time).

[bb-in-hoodie]

below is not a proper solution. I'll fix the comment if I found a better way.

---

Alright I found where it started. When you import an image with import statement, Next.js' default moduleNameWrapper config make jest to mock image import statement with a fileMock.js which is offered by Next.js. And with that, it fails.

As an alternative, I created a fileMock.js and apply it. (as jest suggests)

// __mocks__/fileMock.js
module.exports = 'test-file-stub';

// jest.config.js
const customJestConfig = {
  // ...
  moduleNameMapper: {
    // it will override the default config
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  },
  // ...
};

[rdalfonso]

I've got JEST image transformation workings. The only strange thing is the images are transformed and optimized even though my next.config.js has images: { unoptimized: true }.

[paulinavita]

Has somebody able to solve this issue?

[biswaranjannaik]

anybody found any workaround or solution for this issue?

[baristunar]

Same issue. Still no solution?

[vczb]

Same for me

[leomunizq]

same for me 😔

[salmanaico]

Still no solution ?

[icyJoseph]

Are you all experiencing this with SVG imports? Please try:

// jest.config.js
const nextJest = require("next/jest");

const createJestConfig = nextJest({
  dir: "./",
});

/** @type {import('jest').Config} */
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  // Since Jest 28, IIRC, this has to be installed separately
  testEnvironment: "jest-environment-jsdom",
};

const jestConfigWithOverrides = async (...args) => {
  const fn = createJestConfig(customJestConfig);
  const res = await fn(...args);

  res.moduleNameMapper = {
    "\\.svg": "<rootDir>/src/__mocks__/svgMock.js",
    ...res.moduleNameMapper,
  };

  return res;
};

module.exports = jestConfigWithOverrides;

And then define your mock as:

// src/__mocks__/svgMock.js
// eslint-disable-next-line import/no-anonymous-default-export
const SvgUrl = () => "svgrurl";
export default SvgUrl;

[rdalfonso]

Is there a more complete version of the svgMock.js that utilizes the src and filePath to build out the unique SVG as a string?

[icyJoseph]

Yeah...

• https://jestjs.io/docs/code-transformation

But it is a bit fragile..

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  dir: "./",
});

/** @type {import('jest').Config} */
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(?!svg.)*$": "<rootDir>/src/$1", // do not map svg paths
  },
  transform: {
    "^.+\\.(svg)$": "<rootDir>/src/__mocks__/svgrMock.js", // indicate how to transform the code
  },
  // Since Jest 28, this has to be installed separately
  testEnvironment: "jest-environment-jsdom",
};

const jestConfigWithOverrides = async (...args) => {
  const fn = createJestConfig(customJestConfig);
  const res = await fn(...args);
  // This is the clutch part, remove the svg transformer
  // if the key is ever changed, you gotta update this
  delete res.moduleNameMapper["^.+\\.(svg)$"];

  return res;
};

module.exports = jestConfigWithOverrides;

And then the SVGMock file:

// <rootDir>/src/__mocks__/svgrMock.js
const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {
      code: 
      `const SvgUrl = () => "${path.basename(sourcePath)}";
module.exports = SvgUrl;
`,
    };
  },
};

Don't forget to clear the jestCache: npx jest --clearCache

[rdalfonso]

I've got JEST image transformation workings. The only strange thing is the images are transform and optimized even though my next.config.js has images: { unoptimized: true }.

[leomunizq]

that worked for me:

//jest.setup.js
jest.mock('path/to/image.svg', () => 'svg');

Next/Jest : Cannot override transformIgnorePatterns #35634

[Remydeme]

This solution works for me. Thanks ^^

[daewooLeeNy]

Works for me, too.
But, I have a lot of files, and it would be nice if solution that could be applied as global.
I tried applying it to jest.config.js solution but it didn't work well.