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?
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
}
}