Jest testing with vite

May 28, 2023

Hi i’m newbie with vite and jest.
I’am facing a problem with my test code. In my App.test.jsx file test and expect is not defined

Package.json

{
  "name": "network-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
       "dev": "vite",
       "build": "vite build",
       "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
       "preview": "vite preview",
       "test": "jest"
  },
  "dependencies": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
  },
  "devDependencies": {
       "@testing-library/jest-dom": "^5.16.5",
       "@testing-library/react": "^14.0.0",
       "@testing-library/user-event": "^14.4.3",
       "@types/jest": "^29.5.1",
       "@types/react": "^18.0.28",
       "@types/react-dom": "^18.0.11",
       "@vitejs/plugin-react": "^4.0.0",
       "eslint": "^8.38.0",
       "eslint-plugin-react": "^7.32.2",
       "eslint-plugin-react-hooks": "^4.6.0",
       "eslint-plugin-react-refresh": "^0.3.4",
       "jest": "^29.5.0",
       "vite": "^4.3.2"
 }

App.test.jsx

 test('Renders main page correctly', () => {
     expect(true).toBeTruthy();
 });

Any idea how to solve this issue?

>Solution :

In jest’s installation guide, it’s indicated that vite doesn’t support jest due to it’s different plugin system. There’s a library known as vite-jest which can be installed and configured easily.

The Jest documentation can be helpful in this case:
Jest Installation in Vite

Here’s the link to the Vite-Jest library: Vite-Jest NPM Library