Migrate from Jest to Vitest (#3173)

* first part of transition

* second part of transition

* remove jest

* bump up node version and playwright version

* update all screenshots because of the new playwright version

* fix tests

* one more screenshot update

Author: tom2drum

.github/workflows/checks.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.11.0
+          node-version: 22.14.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -70,7 +70,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.11.0
+          node-version: 22.14.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -133,7 +133,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.11.0
+          node-version: 22.14.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -163,8 +163,8 @@ jobs:
           echo "exitcode=$exitcode" >> $GITHUB_OUTPUT
           exit "$exitcode"
 
-  jest_tests:
-    name: Jest tests
+  vitest_tests:
+    name: Unit tests
     needs: [ code_quality, envs_validation ]
     runs-on: ubuntu-latest
     steps:
@@ -176,7 +176,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.11.0
+          node-version: 22.14.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -195,8 +195,8 @@ jobs:
         if: steps.cache-node-modules.outputs.cache-hit == 'true'
         run: yarn chakra:typegen
 
-      - name: Run Jest
-        run: yarn test:jest ${{ github.event_name == 'pull_request' && '--changedSince=origin/main' || '' }} --passWithNoTests
+      - name: Run Vitest
+        run: yarn test:vitest ${{ github.event_name == 'pull_request' && '--changed=origin/main' || '' }} --passWithNoTests
 
   pw_affected_tests:
     name: Resolve affected Playwright tests
@@ -212,7 +212,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.11.0
+          node-version: 22.14.0
           cache: 'yarn'
 
       - name: Cache node_modules
@@ -254,7 +254,7 @@ jobs:
       (needs.pw_affected_tests.result == 'success' || needs.pw_affected_tests.result == 'skipped') 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.49.0-noble
+      image: mcr.microsoft.com/playwright:v1.57.0-noble
 
     strategy:
       fail-fast: false
@@ -273,7 +273,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 22.11.0
+          node-version: 22.14.0
           cache: 'yarn'
 
       - name: Cache node_modules

.github/workflows/deploy-main.yml

@@ -9,7 +9,7 @@ on:
       - '.husky/**'
       - '.vscode/**'
       - 'docs/**'
-      - 'jest/**'
+      - 'vitest/**'
       - 'mocks/**'
       - 'playwright/**'
       - 'stubs/**'

.github/workflows/toolkit-npm-publisher.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: '22.11.0'
+          node-version: '22.14.0'
           registry-url: 'https://registry.npmjs.org'
 
       # Ensure npm 11.5.1 is installed

.nvmrc

@@ -1 +1 @@
-22.11.0
+>=22.14.0

.vscode/launch.json

@@ -3,23 +3,5 @@
     // Hover to view descriptions of existing attributes.
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Jest: watch current file",
-            "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-            "args": [
-                "${fileBasename}",
-                "--runInBand",
-                "--verbose",
-                "-i",
-                "--no-cache",
-                "--watchAll",
-                "--testTimeout=1000000000",
-            ],
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "neverOpen"
-        }
-    ]
+    "configurations": [ ]
 }

.vscode/tasks.json

@@ -198,34 +198,13 @@
             },
         },
 
-        // JEST TESTS
+        // VITEST TESTS
         {
             "type": "npm",
-            "script": "test:jest",
+            "script": "test:vitest",
             "problemMatcher": [],
-            "label": "jest",
-            "detail": "run jest tests",
-            "presentation": {
-                "reveal": "always",
-                "panel": "shared",
-                "focus": true,
-                "close": false,
-                "revealProblems": "onProblem",
-            },
-            "icon": {
-                "color": "terminal.ansiBlue",
-                "id": "beaker"
-            },
-            "runOptions": {
-                "instanceLimit": 1
-            }
-        },
-        {
-            "type": "npm",
-            "script": "test:jest:watch",
-            "problemMatcher": [],
-            "label": "jest: watch all",
-            "detail": "run jest tests in watch mode",
+            "label": "vitest",
+            "detail": "run unit tests",
             "presentation": {
                 "reveal": "always",
                 "panel": "shared",
@@ -243,10 +222,10 @@
         },
         {
             "type": "shell",
-            "command": "yarn test:jest ${relativeFileDirname}/${fileBasename} --watch",
+            "command": "yarn test:vitest ${relativeFileDirname}/${fileBasename}",
             "problemMatcher": [],
-            "label": "jest: watch",
-            "detail": "run jest tests in watch mode for current file",
+            "label": "vitest: file",
+            "detail": "run unit tests for current file",
             "presentation": {
                 "reveal": "always",
                 "panel": "shared",

Dockerfile

@@ -1,7 +1,7 @@
 # *****************************
 # *** STAGE 1: Dependencies ***
 # *****************************
-FROM node:22.11.0-alpine AS deps
+FROM node:22.14.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat python3 make g++
 RUN ln -sf /usr/bin/python3 /usr/bin/python
@@ -67,7 +67,7 @@ RUN yarn --frozen-lockfile --network-timeout 100000
 # *****************************
 # ****** STAGE 2: Build *******
 # *****************************
-FROM node:22.11.0-alpine AS builder
+FROM node:22.14.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash jq
 
 # pass build args to env variables
@@ -144,7 +144,7 @@ RUN cd ./deploy/tools/llms-txt-generator && yarn build
 # ******* STAGE 3: Run ********
 # *****************************
 # Production image, copy all the files and run next
-FROM node:22.11.0-alpine AS runner
+FROM node:22.14.0-alpine AS runner
 RUN apk add --no-cache --upgrade bash curl jq unzip
 
 ### APP

configs/envs/.env.jest configs/envs/.env.vitestconfigs/envs/.env.jest renamed to configs/envs/.env.vitest

@@ -1,4 +1,4 @@
-# Set of ENVs for Jest unit tests
+# Set of ENVs for Vitest unit tests
 
 # app configuration
 NEXT_PUBLIC_APP_PROTOCOL=http
@@ -37,7 +37,7 @@ NEXT_PUBLIC_GIT_TAG=v1.0.11
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
 
 # app features
-NEXT_PUBLIC_APP_INSTANCE=jest
+NEXT_PUBLIC_APP_INSTANCE=vitest
 NEXT_PUBLIC_APP_ENV=testing
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form

docs/CONTRIBUTING.md

@@ -47,7 +47,7 @@ We are using following technology stack in the project
 - [Next.js](https://nextjs.org/) as application framework
 - [Chakra](https://chakra-ui.com/) as component library; our theme customization can be found in `/theme` folder
 - [TanStack Query](https://tanstack.com/query/v4/docs/react/overview/) for fetching, caching and updating data from the API
-- [Jest](https://jestjs.io/) as JavaScript testing framework
+- [Vitest](https://vitest.dev/) as JavaScript testing framework
 - [Playwright](https://playwright.dev/) as a tool for components visual testing
 
 And of course our premier language is [Typescript](https://www.typescriptlang.org/).
@@ -119,13 +119,13 @@ These are the steps that you have to follow to make everything work:
 
 Every feature or bugfix should be accompanied by tests, either unit tests or component visual tests, or both, except from trivial fixes (for example, typo fix). All commands for running tests you can find [below](./CONTRIBUTING.md#command-list).
 
-### Jest unit tests
+### Vitest unit tests
 
-If your changes are only related to the logic of the app and not to its visual presentation, then try to write unit tests using [Jest](https://jestjs.io/) framework and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). In general these tests are "cheaper" and faster than Playwright ones. Use them for testing your utilities and React hooks, as well as the whole components logic. 
+If your changes are only related to the logic of the app and not to its visual presentation, then try to write unit tests using [Vitest](https://vitest.dev/) framework and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). In general these tests are "cheaper" and faster than Playwright ones. Use them for testing your utilities and React hooks, as well as the whole components logic. 
 
-Place your test suites in `.test.ts` or `.test.tsx` files. You can find or add some mocks or other helpful utilities for these tests purposes in the `/jest` folder. 
+Place your test suites in `.spec.ts` or `.spec.tsx` files. You can find or add some mocks or other helpful utilities for these tests purposes in the `/vitest` folder. 
 
-*Note*, that we are using custom renderer and wrapper in all tests for React components, so please do not import package `@testing-library/react` directly in your test suites, instead use imports from `jest/lib` utility.
+*Note*, that we are using custom renderer and wrapper in all tests for React components, so please do not import package `@testing-library/react` directly in your test suites, instead use imports from `vitest/lib` utility.
 
 ### Playwright components tests
 
@@ -198,8 +198,7 @@ We have 3 pre-configured projects. You can run your test with the desired projec
 | `yarn svg:format` | format and optimize SVG icons in the `/icons` folder using SVGO tool |
 | `yarn svg:build-sprite` | build SVG icons sprite |
 | **Testing** |
-| `yarn test:jest` | run all Jest unit tests |
-| `yarn test:jest:watch` | run all Jest unit tests in watch mode |
+| `yarn test:vitest` | run all Vitest unit tests |
 | `yarn test:pw:local` | run Playwright component tests locally |
 | `yarn test:pw:docker` | run Playwright component tests in docker container |
 | `yarn test:pw:ci` | run Playwright component tests in CI |
@@ -214,6 +213,4 @@ We have 3 pre-configured projects. You can run your test with the desired projec
 
 There are some predefined tasks for all commands described above. You can see the full list by pressing <kbd>cmd + shift + P</kbd> and using command `Task: Run task`
 
-Also there is a Jest test launch configuration for debugging and running current test file in the watch mode.
-
 And you may find the Dev Container setup useful too.

eslint.config.mjs

@@ -6,13 +6,13 @@ import reactQueryPlugin from '@tanstack/eslint-plugin-query';
 import consistentDefaultExportNamePlugin from 'eslint-plugin-consistent-default-export-name';
 import importPlugin from 'eslint-plugin-import';
 import importHelpersPlugin from 'eslint-plugin-import-helpers';
-import jestPlugin from 'eslint-plugin-jest';
 import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
 import noCyrillicStringPlugin from 'eslint-plugin-no-cyrillic-string';
 import playwrightPlugin from 'eslint-plugin-playwright';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import * as regexpPlugin from 'eslint-plugin-regexp';
+import vitestPlugin from 'eslint-plugin-vitest';
 import globals from 'globals';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -79,14 +79,12 @@ export default tseslint.config(
   {
     plugins: {
       '@typescript-eslint': tseslint.plugin,
-      jest: jestPlugin,
     },
     languageOptions: {
       parser: tseslint.parser,
       parserOptions: {
         projectService: true,
       },
-      globals: jestPlugin.environments.globals.globals,
     },
     rules: {
       '@typescript-eslint/array-type': [ 'error', {
@@ -261,10 +259,21 @@ export default tseslint.config(
   },
 
   {
-    files: [ '**/*.test.{ts,js,jsx,tsx}' ],
-    plugins: { jest: jestPlugin },
+    files: [ '**/*.spec.{ts,js,jsx,tsx}' ],
+    plugins: { vitest: vitestPlugin },
+    rules: {
+      ...vitestPlugin.configs.recommended.rules,
+    },
+    settings: {
+      vitest: {
+        typecheck: true,
+      },
+    },
     languageOptions: {
-      globals: jestPlugin.environments.globals.globals,
+      globals: {
+        ...vitestPlugin.environments.env.globals,
+        fetchMock: true,
+      },
     },
   },
 
@@ -297,7 +306,6 @@ export default tseslint.config(
               '/^data/',
               '/^deploy/',
               '/^icons/',
-              '/^jest/',
               '/^lib/',
               '/^mocks/',
               '/^pages/',
@@ -306,6 +314,7 @@ export default tseslint.config(
               '/^theme/',
               '/^toolkit/',
               '/^ui/',
+              '/^vitest/',
             ],
             [ 'parent', 'sibling', 'index' ],
           ],