[Bug]: Jest v29: @carbon/react components being rendered with error

[Grieze]

Package

@carbon/react, carbon-components-react

Browser

No response

Package version

@carbon/react: 1.48.1, carbon-components-react: 8.48.1

React version

v18.2

Description

After upgrading my node version from 16 to 18, along with all other dependencies, all of my unit tests pass except for the ones that import from either @carbon/react or carbon-components-react. Below is the error that I continuously get for all unit tests: Uncaught 'Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s' Although the components render without issue when running the application on local host, the components always fail to render in Jest.

Below is my Jest.config.js file:

const projectConfig = (name, folder) => ({
  displayName: name,
  globals: {
    crypto: {
      value: {
        getRandomValues: arr => crypto.randomBytes(arr.length)
      }
    }
  },
  coverageDirectory: '../coverage/',
  rootDir: path.resolve(__dirname, 'packages', ...folder),
  moduleNameMapper: {
    "astronomia/data(.*)$": path.resolve(
      __dirname,
      'node_modules/astronomia/lib/data$1.cjs'
    ),
    '\\.(scss|svg|css|jpg|ico|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': path.resolve(
      __dirname,
      'testUtils/fileMock.js'
    ),
    renderWithTheme: path.resolve(__dirname, 'testUtils/renderWithTheme.js'),
    getHookWrapper: path.resolve(__dirname, 'testUtils/getHookWrapper.js'),
    mockDate: path.resolve(__dirname, 'testUtils/dateMock.js'),
    '@exo/frontend-common-theme-utils': path.resolve(
      __dirname,
      'packages/themes/default-theme/src/index.js'
    ),
    '@carbon/icons-react': path.resolve(__dirname, 'testUtils/iconsMock.js'),
    '@carbon/icons-react/es': path.resolve(__dirname, 'testUtils/iconsMock.js'),
    breakpoints: path.resolve(
      __dirname,
      'packages/themes/default-theme/src/breakpoints.js'
    ),
    mockSiteData: '<rootDir>/testUtils/mockSiteData.js',
    mockFormData: '<rootDir>/testUtils/mockFormData.js',
    mockProductData: '<rootDir>/testUtils/mockProductData.js',
    mockMyAccountData: '<rootDir>/testUtils/mockMyAccountData.js'
  },
  setupFilesAfterEnv: [
    '@testing-library/jest-dom',
    path.resolve(__dirname, 'testUtils', 'globalSetup.js')
  ],
  testMatch: ['<rootDir>/**/*.test.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': [
      'babel-jest',
      { configFile: path.resolve(__dirname, 'testUtils/babel.config.js') }
    ]
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/' ],
});

Reproduction/example

https://stackblitz.com/edit/stackblitz-starters-xds8gz?file=src%2FApp.tsx

Steps to reproduce

You'll see that the error even comes up in the stackblitz example. This is a major issue for carbon. Essentially, the code example above shows the component that I have created. It renders well when I run it in local environment. But when I am trying to use the render method from react-testing-library, it crashes and gives the same error as above and in the example.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tay1orjones]

Hey, sorry you're running into this. It's could be related to how you're importing one of your components or Carbon components. In the stackblitz example, App.tsx is providing a default export, while in index.tsx you're importing it via a named export. Fixing this allows it to render

- import { App } from './App';
+ import App from './App';

Another thing that I noticed was that you're mocking @carbon/icons-react and @carbon/icons-react/es. It could be something with that mock as @carbon/react imports and uses icons within components and it also re-exports everything from @carbon/icons-react under @carbon/react/icons.

We're using Jest with Node 20 and aren't seeing any issues in our own codebase. Same thing earlier last year when we were using Node 18.

[Grieze]

Thanks for the reply! We'll give a try, though the import statement you provided wouldn't work since importing your way would just import undefined components, they have to be in brackets. I'll dig into the mocking of the carbon components.