React Testing library setup with vite

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

Comments

[Shyam-Dadhaniya]

Nice Explanation. This is really helpful.

[indrasisdatta]

Instead of using jest, can't we use vitest instead? It's easier to configure in viconfig.js or viconfig.test.js.

[smeet-kachhadiya]

Yes, that is possible. But When I tried to config RTL with vite I came across many difficuties. So when I was able to configure it I thought of sharing it with the fellow developers!