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.

Rhona

Answer 1

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.

Rhona

Answer 2

This might be obvious to most people but in my case the issue was that the test file also has to end in ".jsx" when trying to test a ".jsx" file.

App.test.jsx worked for App.jsx

Tarpley

I was facing the same issue. And this worked for me :) Thanks Patrick. – Manzanilla

Answer 3

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

Montalvo