Migrate remaining jest tests to vitest

.devcontainer/devcontainer.json

@@ -53,7 +53,7 @@
         "github.remotehub",
         "circleci.circleci",
         "stylelint.vscode-stylelint",
-        "Orta.vscode-jest",
+        "vitest.explorer",
         "christian-kohler.path-intellisense",
         "esbenp.prettier-vscode",
         "avraammavridis.vsc-react-documentation",
@@ -65,7 +65,6 @@
       ],
       "settings": {
         "terminal.integrated.defaultProfile.linux": "zsh",
-        "jest.jestCommandLine": "yarn test",
         "eslint.enable": true,
         "eslint.validate": ["javascript", "javascriptreact"],
         "stylelint.enable": true,

.eslintrc.json

@@ -2,14 +2,13 @@
   "root": true,
   "extends": [
     "react-app",
-    "react-app/jest",
     "plugin:prettier/recommended"
   ],
   "plugins": [
     "prettier",
     "react",
     "jsx-a11y",
-    "jest"
+    "testing-library"
   ],
   "settings": {
     "react": {
@@ -54,16 +53,32 @@
     },
     {
       "files": ["apps/scratch-frame/**/*.test.js", "apps/scratch-frame/**/*.test.jsx"],
+      "extends": ["plugin:testing-library/react"],
       "globals": {
         "vi": "readonly",
         "test": "readonly",
-        "describe": "readonly"
+        "describe": "readonly",
+        "it": "readonly",
+        "expect": "readonly",
+        "beforeEach": "readonly",
+        "afterEach": "readonly",
+        "beforeAll": "readonly",
+        "afterAll": "readonly"
       }
     },
     {
       "files": ["src/**/__tests__/**/*.{js,jsx,ts,tsx}", "src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
+      "extends": ["plugin:testing-library/react"],
       "globals": {
-        "vi": "readonly"
+        "vi": "readonly",
+        "describe": "readonly",
+        "test": "readonly",
+        "it": "readonly",
+        "expect": "readonly",
+        "beforeEach": "readonly",
+        "afterEach": "readonly",
+        "beforeAll": "readonly",
+        "afterAll": "readonly"
       }
     }
   ]

.github/workflows/ci-cd.yml

@@ -76,20 +76,10 @@ jobs:
         run: yarn install --immutable
 
       - name: Run tests
-        run: yarn run test --coverage --maxWorkers=4 --workerThreads=true --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
+        run: yarn test --run
         env:
-          JEST_JUNIT_OUTPUT_DIR: ./coverage/
           REACT_APP_API_ENDPOINT: http://localhost:3009
           REACT_APP_SCRATCH_FRAME_URL: "http://scratch-frame.example.com"
-      - name: Run Vitest tests
-        run: yarn test:vitest
-        env:
-          REACT_APP_API_ENDPOINT: http://localhost:3009
-          REACT_APP_SCRATCH_FRAME_URL: "http://scratch-frame.example.com"
-      - name: Record coverage
-        run: ./.github/workflows/record_coverage
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
       - name: Run Scratch Frame tests
         run: yarn run test:scratch-frame
 

.vscode/tasks.json

@@ -2,13 +2,12 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "Test Current File (Jest)",
+      "label": "Test Current File (Vitest)",
       "type": "shell",
       "command": "yarn",
       "args": [
         "test",
-        "--runTestsByPath",
-        "--watchAll=false",
+        "--run",
         "${file}"
       ],
       "options": {
@@ -22,6 +21,26 @@
       },
       "problemMatcher": []
     },
+    {
+      "label": "Test Current Line (Vitest)",
+      "type": "shell",
+      "command": "yarn",
+      "args": [
+        "test",
+        "--run",
+        "${file}:${lineNumber}"
+      ],
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "group": "test",
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "clear": true
+      },
+      "problemMatcher": []
+    },
     {
       "label": "Test Current File (Cypress Headless)",
       "type": "shell",

AGENTS.md

@@ -1,7 +1,6 @@
 # Project Overview
 - Web component version of Raspberry Pi Code Editor, built with React and
-  Vite (migrated from an ejected-CRA webpack setup; the Jest test setup from
-  that era is unchanged, see Testing & CI below).
+  Vite (migrated from an ejected-CRA webpack setup).
 - Primary entry is the web component bundle served by the dev server at
   `http://localhost:3011`.
 - Three Vite configs at the repo root, each producing one unhashed, classic
@@ -14,8 +13,7 @@
 - `src/`: application code, redux, web component entrypoints.
 - `public/`: static assets, Python/Skulpt libraries and shims.
 - `cypress/`: end-to-end tests and fixtures.
-- `config/`: Jest config and build helpers (CRA/webpack-era leftovers; not used
-  by the Vite build).
+- `config/`: deploy helpers (e.g. `nginx.conf.erb`); not used by the Vite build.
 - `.github/workflows/`: CI/CD and deploy pipelines.
 
 ## Quickstart Commands
@@ -38,8 +36,7 @@ yarn start
 ```
 yarn install --immutable
 yarn lint
-yarn run test --coverage --maxWorkers=4 --workerThreads=true \
-  --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
+yarn test --run
 ```
 - Cypress in CI starts the app with `yarn start` and runs against
   `http://localhost:3011` with `REACT_APP_API_ENDPOINT`, `PUBLIC_URL`,
@@ -93,7 +90,7 @@ yarn exec cypress open
   Deploys are driven by `.github/workflows/deploy.yml`.
 
 ### Running tests
-- Unit tests: `CI=true yarn test` (without `CI=true`, Jest enters interactive watch mode which hangs).
+- Unit tests: `CI=true yarn test` (without `CI=true`, Vitest enters interactive watch mode which hangs).
 - Lint: `yarn lint` (runs ESLint on `src/` and `cypress/`).
 - Cypress e2e requires the dev server to be running first (`yarn start`).
 

README.md

@@ -1,6 +1,6 @@
 # Getting Started
 
-This project provides a web component containing the Raspberry Pi Code Editor for use on other sites. It was originally bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and later ejected; the build now runs on [Vite](https://vite.dev) (see `vite.config.js`, `vite.html-renderer.config.js` and `vite.worker.config.js`), while tests still run on the Jest setup CRA generated.
+This project provides a web component containing the Raspberry Pi Code Editor for use on other sites. It was originally bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and later ejected; the build now runs on [Vite](https://vite.dev) (see `vite.config.js`, `vite.html-renderer.config.js` and `vite.worker.config.js`), and tests run on [Vitest](https://vitest.dev).
 
 ## Install dependencies
 
@@ -101,7 +101,7 @@ Note: Both eslint and stylelint are run as part of the CI pipeline.
 
 ## Testing
 
-Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework `Jest` and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
+Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework [Vitest](https://vitest.dev) and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
 
 Integration testing is carried out via `cypress` and can be run using: