//Once React project is made with TypeScript do the following: //install main dependency of jest npm i jest --save-dev //Install react-testing-library packages: npm i @testing-library/jest-dom @testing-library/react @testing-library/user-event --save-dev //If using CSS Modules npm i jest-css-modules-transform // If using Jest 28 or higher npm i jest-environment-jsdom //You will then need: //1. jest.config.cjs module.exports = { transform: { "^.+\\.(t|j)sx?$": ["@swc/jest"], "^.+\\.jsx?$": "babel-jest", "^.+\\.css$": "jest-css-modules-transform", }, testEnvironment: "jest-environment-jsdom", setupFilesAfterEnv: ["./jest.setup.tsx"], preset: "ts-jest", testMatch: ["<rootDir>/src/**/*.test.(ts|tsx)"], // If SVG needs to be mocked moduleNameMapper: { "\\.svg$": "<rootDir>/svgMock.tsx", }, }; //2. jest.setup.tsx import '@testing-library/jest-dom'; import '@testing-library/jest-dom/extend-expect'; declare global { namespace NodeJS { interface Global { fetch: jest.Mock; } } } //3. (OPTIONAL) for svg mock; svgMock.tsx: module.exports = ''; //Excerpt from Bing search: //It seems like you are trying to import an SVG file as a React component in your test file. This causes Jest to throw an error because it cannot parse the SVG file as JavaScript. You need to mock the SVG file so that Jest can ignore it during testing. You can do this by using the moduleNameMapper option in your Jest configuration and mapping the SVG files to a mock file that returns an empty string or a dummy component //Therefore, ideally package.json should look like: { "name": "vite-react-starter", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "jest --watch" }, "dependencies": { "@swc/jest": "^0.2.26", "firebase": "^9.17.2", "jest-css-modules-transform": "^4.4.2", "jest-environment-jsdom": "^29.5.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.1", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", "@vitejs/plugin-react": "^3.0.1", "jest": "^29.5.0", "ts-jest": "^29.1.0", "typescript": "^4.9.5", "vite": "^4.0.4" } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter