[React] Configuring Vite on a React project with Jest

When I first migrated from CRA to Vite, there were no issues when running the dev server. However, I ran into a lot of errors when running tests and using svgs in my React components.

Use this setup if you

  • Use React Testing Library and jest for writing tests
  • Use svgr to import svgs as a React Component

Here is the file structure we will end up getting at the end of the setup.

├── .babelrc
├── index.html
├── jest.config.js
├── jest.setup.js
├── package.json
├── src
└── vite.config.js

CRA by default generates a file named setupTests.js under src directory. This file has the below import statement. Feel free to leave it as is or delete it and create one yourself.

svgrMock.js file goes under src/__mocks__/

References:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store