Quiero cubrir mi código con pruebas unitarias usando Jest y React Testing Library. Pero tengo un problema: las pruebas se ejecutan con error porque la variable React no está definida.
Aquí está mi configuración:
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" }, };El guión de prueba
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()); }); });Y esos son los errores que tira la broma
TypeError: Cannot read properties of undefined (reading 'Component') > 24 | class ErrorBoundary extends React.Component<{ children: ReactNode }, { hasError: boolean }> { Si uso solo Component en lugar de React.Component , hay otro error
TypeError: Cannot read properties of undefined (reading 'createElement') 152 | const emptyFiller = ( > 153 | <VFlexBox align="center" justify="center" cls="grid__empty-filler"> | ^ Y en este caso no tengo ni idea de cómo solucionarlo. Según tengo entendido, React llama a createElement , porque no lo uso directamente.
¿Podría por favor describir, cómo puedo resolver este problema?
Esta es probablemente la respuesta incorrecta, pero tengo una solución. Pude solucionar esto haciendo el siguiente cambio en tsconfig.json :
{ "compilerOptions": { "jsx": "react-jsx", // previously was "react"Esperemos que alguien intervenga con la respuesta correcta pronto.
Editar... aquí está mi solución temporal final, creé un nuevo tsconfig para las pruebas que cambia el modo jsx
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; y tsconfig.test.json
{ "extends": "./tsconfig.json", "compilerOptions": { "jsx": "react-jsx", // override here so that the tests work, but original code stays the same } }