Vitest with React Testing Library 'Unexpected Token'

Question

I'm using react with ViteJS and Vitest for testing. I have set up the config for vitest and the test setup file too as you can see in the screenshots below.

vite.config.js

src/test/setup.ts

src/app/App.tsx

src/app/App.spec.js

here's the error I'm getting:

I found a lot of sources on similar issues about the topic but nothing I tried worked. I also followed the documentation for the vite config and a lot of articles too. Everyone is saying the same thing but I'm still getting this error for some reason.

Answer 1

I think you forgot to add @testing-library to vite.config.js alias object.

Answer 2

I used the same config with jest and it worked fine. But in this situation, I got stuck and then tried to rename the filename to .tsx or .jsx instead of .ts or .js . After that, I re-ran the test file and everything started working.