I have React typescript web app, and I would like to create some unit testing. I am very new with tests and Jest, so I try to write a unit test for a basic component that displays 4 social links

My SocialMediaArea.tsx simply map a json to create 4 button with social medias links.

Here is my test component :

import {render, screen} from "@testing-library/react";
import SocialMediaArea from "../components/Areas/SocialMediaArea";

describe("SocialMediaArea", () => {
    it("renders the correct social media links", () => {
        render(<SocialMediaArea />);

        // Check that the correct number of social media links are rendered
        expect(screen.getAllByRole("link").length).toEqual(4);

        // Check that the Instagram link is correct
        expect(screen.getByRole("link", {name: /instagram/i})).toHaveAttribute(
            "href",
            "link"
        );

        // Check that the Facebook link is correct
        expect(screen.getByRole("link", {name: /facebook/i})).toHaveAttribute(
            "href",
            "link"
        );

        // Check that the Twitter link is correct
        expect(screen.getByRole("link", {name: /twitter/i})).toHaveAttribute("href", "link");

        // Check that the YouTube link is correct
        expect(screen.getByRole("link", {name: /youtube/i})).toHaveAttribute(
            "href",
            "link"
        );
    });
});

This test generate following error :

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

      at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:72:44)

jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
    preset: "ts-jest",
    testEnvironment: "jsdom",
};

My package.json

"devDependencies": {
        "@testing-library/dom": "^8.19.1",
        "@testing-library/react": "^13.4.0",
        "@types/testing-library__react": "^10.2.0",
        "autoprefixer": "^10.4.13",
        "eslint": "8.30.0",
        "eslint-config-react-app": "^7.0.1",
        "jest": "^29.3.1",
        "postcss": "^8.4.20",
        "postcss-import": "^15.1.0",
        "prettier": "^2.8.1",
        "prettier-plugin-tailwindcss": "^0.2.1",
        "react-test-renderer": "^18.2.0",
        "tailwindcss": "^3.2.4",
        "ts-jest": "^29.0.3"
    }

Where is my mistake ?

CodePudding user response：

Try to add npm i jest-environment-jsdom --save-dev since your jest version is above version 28.