Search code examples
node.jsreactjsjestjsvite

Jest testing with vite

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();
 });

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