React is undefind in Jest tests

Question

I want to cover my code with unit tests using Jest and React Testing Library. But I have a problem - tests are executed with error because the React varibable is undefined.

Here's my config:

const { pathsToModuleNameMapper } = require('ts-jest');
const { defaults } = require('jest-config');

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    moduleDirectories: ['./node_modules', 'src'],
    moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
    setupFiles: ["<rootDir>/tests/setupFiles.js"],
    setupFilesAfterEnv: ['<rootDir>/tests/jest-setup.ts'],
    transform: {
        '^.+\\.(js|jsx)?$': 'babel-jest'
    },
    "moduleNameMapper": {
        "^@domain": "<rootDir>/src/domain",
        "^@service": "<rootDir>/src/service",
        "^@utils": "<rootDir>/src/utils",
        "^@view": "<rootDir>/src/view",
        "^.+\\.(css|scss)$": "<rootDir>/tests/styleMock.js",
        "^@components": "<rootDir>/src/components",
        "^@resources": "<rootDir>/resources"
    },
};

The test script

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';

import '../../utils.js';
import '../../../src/locale/ru.js';

import AloneTable from '../../../src/view/aloneTable/AloneTable';

describe('Page AloneTableView', () => {
    test('Render check', async () => {
        const tmp = render(<AloneTable/>);
        await waitFor(() => expect(tmp.asFragment()).toMatchSnapshot());
        await waitFor(() => expect(tmp.getByText('...')).toBeInTheDocument());
    });
});

And that is the errors jest throws

    TypeError: Cannot read properties of undefined (reading 'Component')

    > 24 | class ErrorBoundary extends React.Component<{ children: ReactNode }, { hasError: boolean }> {

If I use just Component instead of React.Component there's another error

    TypeError: Cannot read properties of undefined (reading 'createElement')

      152 | const emptyFiller = (
    > 153 |     <VFlexBox align="center" justify="center" cls="grid__empty-filler">
          |     ^

And in this case I have no idea how to fix it. As I understand createElement is being called by React, because I don't use it directly.

Could you please describe, how can I solve this problem?

Answer 1

This is probably the wrong answer, but I have a fix. I was able to get around this by making the following change in tsconfig.json :

{
  "compilerOptions": {
    "jsx": "react-jsx", // previously was "react"

Hopefully someone will chime in with the right answer soon.

Edit... here's my final temporary solution, i created a new tsconfig for the tests that changes the jsx mode

jest.config.ts

import type { Config } from "@jest/types";
const config: Config.InitialOptions = {
  preset: "ts-jest",
  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
  testEnvironment: "jsdom",
  testEnvironmentOptions: { browsers: ["chrome", "firefox", "safari"] },
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.test.json", // new tsconfig just for tests!
    },
  },
};
export default config;

and tsconfig.test.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "jsx": "react-jsx", // override here so that the tests work, but original code stays the same
    }
}