remove react-scripts and use vitejs in the example widget

Outline the vitest migration

Add changesets

Fix typos

Fix missing dependencies

Remove obsolete jest config

Remove more old references to jest

Use our own more simple vitest-axe extension

Adjust the i18next-parser.config.js

Ensure the coverage dependency is made a dependency and ensure we are not running in commonjs mode

Use the correct axe import

Fix vite config for the example widget and the dedup of it. Also fix the exports in the package jsons

Ensure we run cleanup from @testing-library/react after each test to have a clean state

Exclude the build and lib folders to prevent falsely detected tests

Run check-api-report to update the testing library

Ensure we don't mix act from different dependencies and just always use the one from react

Fixup review items and update docs as needed

Signed-off-by: MTRNord <[email protected]>

Author: MTRNord

.changeset/eighty-taxis-repair.md

@@ -0,0 +1,5 @@
+---
+'@matrix-widget-toolkit/testing': major
+---
+
+Migrate to vitest for testing. We do not support jest any further

.changeset/honest-eyes-approve.md

@@ -0,0 +1,7 @@
+---
+'@matrix-widget-toolkit/react': patch
+'@matrix-widget-toolkit/api': patch
+'@matrix-widget-toolkit/mui': patch
+---
+
+Migrate to vitejs and vitest

.gitignore

@@ -140,4 +140,8 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+# Debug Helpers
+log.sh
+log.out

README.md

@@ -10,7 +10,7 @@ This repository contains multiple [packages](./packages) that provide reusable c
 - [`@matrix-widget-toolkit/api`](./packages/api): A package that wraps [`matrix-widget-api`](https://github.com/matrix-org/matrix-widget-api) to provide a more convenient API.
 - [`@matrix-widget-toolkit/react`](./packages/react): A package that provides a Widget API integration for React apps.
 - [`@matrix-widget-toolkit/mui`](./packages/mui): A package that provides a matching Mui theme for Element.
-- [`@matrix-widget-toolkit/testing`](./packages/testing): Testing support for `@matrix-widget-toolkit/api`.
+- [`@matrix-widget-toolkit/testing`](./packages/testing): Vitest Testing support for `@matrix-widget-toolkit/api`.
 - [`@matrix-widget-toolkit/widget-server`](./containers/widget-server): A container to host a Matrix widget in a production environment.
 - More packages to follow…
 
@@ -59,8 +59,10 @@ After checkout, run `yarn install` to download the required dependencies
 The following commands are available:
 
 - `yarn dev:example`: Start the example app.
-- `yarn start:example`: Start the example app with a self-signed HTTPS certificate.
+- `yarn dev:example:https`: Start the example app with a self-signed HTTPS certificate.
 - `yarn build`: Build all packages and the example app.
+- `yarn preview`: Preview a built version of the example app. Requires `yarn build` to be run first.
+- `yarn preview:https`: Preview a built version of the example app with a self-signed HTTPS certificate. Requires `yarn build` to be run first.
 - `yarn test`: Watch all packages for changes and run tests.
 - `yarn tsc`: Check TypeScript types for errors in all packages.
 - `yarn lint`: Run eslint on all packages.

eslint.config.mjs

@@ -17,11 +17,11 @@
 import { fixupPluginRules } from '@eslint/compat';
 import js from '@eslint/js';
 import eslintConfigPrettier from 'eslint-config-prettier';
-import jest from 'eslint-plugin-jest';
 import notice from 'eslint-plugin-notice';
 import pluginPromise from 'eslint-plugin-promise';
 import react from 'eslint-plugin-react';
 import testingLibrary from 'eslint-plugin-testing-library';
+import vitest from 'eslint-plugin-vitest';
 import path from 'path';
 import ts from 'typescript-eslint';
 import { fileURLToPath } from 'url';
@@ -35,7 +35,6 @@ export default ts.config(
       '**/lib/**',
       '**/build/**',
       '**/craco.config.js',
-      '**/jest.config.js',
       '**/i18next-parser.config.js',
       'scripts/prepack.js',
       'scripts/postpack.js',
@@ -55,10 +54,8 @@ export default ts.config(
   {
     plugins: {
       notice,
-      jest,
     },
     rules: {
-      ...jest.configs['flat/recommended'].rules,
       'notice/notice': [
         'error',
         {
@@ -98,13 +95,15 @@ export default ts.config(
   {
     files: ['**/*.test.*'],
     plugins: {
+      vitest,
       // See https://github.com/testing-library/eslint-plugin-testing-library/issues/899#issuecomment-2121272355 and
       // https://github.com/testing-library/eslint-plugin-testing-library/issues/924
       'testing-library': fixupPluginRules({
         rules: testingLibrary.rules,
       }),
     },
     rules: {
+      ...vitest.configs.recommended.rules,
       ...testingLibrary.configs['flat/react'].rules,
       'react/display-name': 'off',
       // FIXME: Came in an update and should be fixed properly

example-widget-mui/craco.config.js

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-module.exports = {
+const i18NextParserConfig = {
   locales: ['en', 'de'],
   output: 'public/locales/$LOCALE/$NAMESPACE.json',
   sort: true,
   resetDefaultValueLocale: 'en',
 };
+
+export default i18NextParserConfig;

example-widget-mui/i18next-parser.config.js

@@ -2,31 +2,44 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <title>Example Widget</title>
+
     <!--#echo var="__INJECT_SCRIPT_TAG__" encoding="none"-->
+
+    <script nonce='<!--#echo var="cspNonce"-->'>
+      __webpack_nonce__ = '<!--#echo var="cspNonce"-->';
+      // Set global for compatibility reason.
+      // globalThis ?? window is required as some things require global and others use window.
+      // See also https://github.com/nordeck/matrix-widget-toolkit/pull/774#discussion_r1763252347
+      global = globalThis ?? window;
+    </script>
+
+    <script nonce='<!--#echo var="cspNonce"-->' type="module">
+      // Copy environment variables to process.env for backward compatibility with CRA.
+      window.process = window.process ?? {};
+      window.process.env = import.meta.env;
+    </script>
+
+    <style nonce='<!--#echo var="cspNonce"-->'>
+      #root {
+        width: 100%;
+      }
+    </style>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
@@ -40,5 +53,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

example-widget-mui/public/index.html renamed to example-widget-mui/index.html

@@ -5,6 +5,7 @@
   "author": "Nordeck IT + Consulting GmbH",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@matrix-widget-toolkit/api": "3.4.0",
     "@matrix-widget-toolkit/mui": "2.0.4",
@@ -23,18 +24,19 @@
     "react-i18next": "^15.0.2",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
-    "react-scripts": "5.0.1",
     "react-use": "^17.5.1",
     "rxjs": "^7.8.1"
   },
   "scripts": {
-    "dev": "cross-env BROWSER=none WDS_SOCKET_PORT=0 craco start",
-    "start": "cross-env BROWSER=none WDS_SOCKET_PORT=0 HTTPS=true craco start",
+    "dev": "vite",
+    "dev:https": "VITE_DEV_SSL=true vite",
+    "preview": "vite preview",
+    "preview:https": "VITE_DEV_SSL=true vite preview",
     "lint": "eslint .",
     "tsc": "tsc",
-    "build": "craco build",
-    "test": "jest --watch",
-    "depcheck": "depcheck --ignores=@types/node,@types/jest --ignore-dirs=build",
+    "build": "tsc && vite build",
+    "test": "echo \"Tests have to run from root project\"",
+    "depcheck": "depcheck --ignores=@types/node,@vitest/coverage-v8 --ignore-dirs=build",
     "translate": "i18next src/**/*.{ts,tsx}",
     "check-api-report": "echo \"Nothing to report\"",
     "generate-api-report": "echo \"Nothing to report\""
@@ -52,20 +54,23 @@
     ]
   },
   "devDependencies": {
-    "@craco/craco": "^7.1.0",
     "@matrix-widget-toolkit/testing": "2.5.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
-    "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^27.5.2",
-    "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.5.5",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/coverage-v8": "^2.0.5",
+    "axe-core": "^4.10.0",
+    "happy-dom": "^15.7.3",
     "i18next-parser": "^9.0.2",
-    "jest-axe": "^9.0.0",
     "msw": "^2.4.9",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
   }
 }

example-widget-mui/jest.config.js

@@ -19,10 +19,11 @@ import { WidgetApiMockProvider } from '@matrix-widget-toolkit/react';
 import { MockedWidgetApi, mockWidgetApi } from '@matrix-widget-toolkit/testing';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { axe } from 'jest-axe';
+import axe from 'axe-core';
 import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
 import { ComponentType, PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { RoomNameEvent } from '../events';
 import { AllRoomsPage } from './AllRoomsPage';
 
@@ -89,7 +90,7 @@ describe('<AllRoomsPage />', () => {
       ).toBeEnabled();
     });
 
-    expect(await axe(container)).toHaveNoViolations();
+    expect(await axe.run(container)).toHaveNoViolations();
   });
 
   it('should request the capabilities', async () => {

example-widget-mui/package.json

@@ -16,6 +16,7 @@
 
 import { WidgetApiImpl } from '@matrix-widget-toolkit/api';
 import { render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
 import { App } from './App';
 
 it('should render error message', async () => {

example-widget-mui/src/AllRoomsPage/AllRoomsPage.test.tsx

@@ -18,10 +18,11 @@ import { WidgetApiMockProvider } from '@matrix-widget-toolkit/react';
 import { MockedWidgetApi, mockWidgetApi } from '@matrix-widget-toolkit/testing';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { axe } from 'jest-axe';
+import axe from 'axe-core';
 import { EventDirection, WidgetEventCapability } from 'matrix-widget-api';
 import { ComponentType, PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { DicePage } from './DicePage';
 
 let widgetApi: MockedWidgetApi;
@@ -65,7 +66,7 @@ describe('<DicePage />', () => {
       screen.findByRole('heading', { name: /dice/i }),
     ).resolves.toBeInTheDocument();
 
-    expect(await axe(container)).toHaveNoViolations();
+    expect(await axe.run(container)).toHaveNoViolations();
   });
 
   it('should request the capabilities', async () => {

example-widget-mui/src/App/App.test.tsx

@@ -17,11 +17,20 @@
 import { WidgetApiMockProvider } from '@matrix-widget-toolkit/react';
 import { MockedWidgetApi, mockWidgetApi } from '@matrix-widget-toolkit/testing';
 import { render, screen } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import axe from 'axe-core';
 import { HttpResponse, http } from 'msw';
 import { setupServer } from 'msw/node';
 import { ComponentType, PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from 'vitest';
 import { IdentityPage } from './IdentityPage';
 
 let widgetApi: MockedWidgetApi;
@@ -67,7 +76,7 @@ describe('<IdentityPage />', () => {
       screen.findByRole('heading', { name: /Identity/i }),
     ).resolves.toBeInTheDocument();
 
-    expect(await axe(container)).toHaveNoViolations();
+    expect(await axe.run(container)).toHaveNoViolations();
   });
 
   it('should show the user information', async () => {