React Testing library setup with vite

smeet-kachhadiya — Mon, 17 Jul 2023 06:40:43 +0000

First of all make new project using vite & typescript. Use following command yarn create vite

If you face typescript error then change your typescript version to workspace version.

Install following dependencies

yarn add -D jest @babel/preset-env @babel/preset-react @babel/preset-typescript @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy jest-environment-jsdom ts-node

jest install jest
@babel/preset-env @babel/preset-react for JSX support in test file
@babel/preset-typescript for ts support in test file
@testing-library/react install testing library
@testing-library/jest-dom custom dom for jest
@testing-library/user-event for adding interactivity in test like click,hover..
jest-svg-transformer identity-obj-proxy so that we can import and use css and image files
jest-environment-jsdom by-default jest uses nodejs environment. To test web app we need jsdom environment.
ts-node so that we can use ts config files

If you face eslint error in test file then comment project: true in .eslintrc.ejs in parserOptions

add jest.config.ts file and configure it like mentioned below

now just add "test":"jest" in the scripts inside package.json

Forem: smeet-kachhadiya

React Testing library setup with vite