[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:

Migrating a Create React App (CRA) application to Vite

Try to test component with React generated form svgr · Issue #83 · gregberge/svgr