React Testing Library render import fails with TypeError: Cannot read properties of undefined (reading 'length')

user_1345632 0
Viewed 320

I'm putting together a general setups of react typescript and jest+ react testing library. Everything builds and looks fine but when I tried adding rtl and jest the first test i wrote failed. The issue seems to be that the imported render method from rtl fails.

app.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';

describe('app component', () => {
    it('renders header', () => {
        const Test = () => <h1>React</h1>;
        render(<Test />);
        screen.getByText(/react/i);
        screen.debug();
    });
});

jest.config.ts

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    verbose: true,
    automock: true,
};
export default config;

Test Output enter image description here

ts-jest react-testing-library reactjs
1 Answers

My final result was as follows and my dependencies were the issue: jest.config.ts

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
    // Indicates whether each individual test should be reported during the run
    // Defaults to false for multiple files or true for a single test file
    verbose: true,

    // A list of paths to directories that Jest should use to search for files in.
    // The root of your source code, typically /src
    // `<rootDir>` is a token Jest substitutes
    roots: ['<rootDir>/src'],

    // The environment that tests will be run in
    // The default environment in Jest is a Node.js environment.
    // set to jsdom for react testing library
    testEnvironment: 'jsdom',

    // A preset that is used as a base for Jest's configuration.
    // This performs jest typescript transformations
    preset: 'ts-jest',
};

export default config;

dev dependencies

"devDependencies": {
        **"@testing-library/jest-dom": "^5.16.4",**
        **"@testing-library/react": "^13.3.0",**
        **"@types/jest": "^28.1.3",**
        "@typescript-eslint/eslint-plugin": "^5.29.0",
        "@typescript-eslint/parser": "^5.29.0",
        "eslint": "^8.18.0",
        "eslint-plugin-react": "^7.30.1",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.5.0",
        **"jest": "^28.1.1",**
        **"jest-environment-jsdom": "^28.1.1",**
        "prettier": "^2.7.1",
        **"ts-jest": "^28.0.5",**
        "ts-loader": "^9.3.1",
        **"ts-node": "^10.8.1",**
        "typescript": "^4.7.4",
        "webpack": "^5.73.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.2"
    }
user_13456320
Related