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
Top comments (3)
Nice Explanation. This is really helpful.
Instead of using jest, can't we use vitest instead? It's easier to configure in viconfig.js or viconfig.test.js.
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!