[core] Migrate test runner to vitest

.circleci/config.yml

@@ -145,7 +145,7 @@ jobs:
       - checkout
       - install_js
       - run:
-          name: Tests fake browser
+          name: Unit Tests
           command: pnpm test:coverage:ci
       # - run:
       #     name: Check coverage generated

.eslintignore

@@ -10,17 +10,6 @@
 /packages/pigment-css-react/theme/
 /packages/pigment-css-react/tests/**/fixtures
 /packages/pigment-css-nextjs-plugin/loader.js
-# Ignore fixtures
-/packages-internal/scripts/typescript-to-proptypes/test/*/*
-/test/bundling/fixtures/**/*.fixture.js
-# just an import that reports eslint errors depending on whether the fixture (which is not checked in) exists
-/test/bundling/fixtures/create-react-app/src/index.js
-/test/bundling/fixtures/gatsby/.cache
-/test/bundling/fixtures/gatsby/public
-/test/bundling/fixtures/gatsby/public
-/test/karma.conf.js
-/test/karma.conf.profile.js
-/test/regressions/**/*
 /tmp
 .next
 build

.eslintrc.js

@@ -140,7 +140,7 @@ module.exports = {
     'react/forbid-prop-types': 'off', // Too strict, no time for that
     'react/jsx-curly-brace-presence': 'off', // broken
     // airbnb is using .jsx
-    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.tsx'] }],
     // Prefer <React.Fragment> over <>.
     'react/jsx-fragments': ['error', 'element'],
     // Enforces premature optimization
@@ -209,6 +209,7 @@ module.exports = {
         '*.test.js',
         '*.test.ts',
         '*.test.tsx',
+        '*.test.jsx',
       ],
       extends: ['plugin:mocha/recommended'],
       rules: {

.gitignore

@@ -12,7 +12,8 @@
 /.eslintcache
 /.nyc_output
 /benchmark/**/dist
-/coverage
+/coverage/
+/html/
 /docs/.env.local
 /docs/export
 /docs/pages/playground/

apps/pigment-css-next-app/package.json

@@ -13,31 +13,21 @@
     "@mui/utils": "next",
     "@mui/base": "next",
     "@mui/lab": "next",
-    "@mui/material": "next",
-    "@mui/system": "next",
-    "@mui/material-nextjs": "next",
-    "@mui/icons-material": "next",
-    "@emotion/cache": "latest",
+    "@mui/material": "^6.0.0-alpha.6",
+    "@mui/system": "^6.0.0-alpha.5",
+    "@mui/material-nextjs": "^6.0.0-alpha.6",
+    "@mui/icons-material": "^6.0.0-alpha.6",
+    "@emotion/cache": "11.11.0",
     "local-ui-lib": "workspace:^",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "next": "latest"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "next": "^14.2.3"
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "workspace:^",
-    "@types/node": "^20.5.7",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "eslint": "^8.57.0",
-    "typescript": "^5.4.4"
-  },
-  "nx": {
-    "targets": {
-      "preview": {
-        "dependsOn": [
-          "^build"
-        ]
-      }
-    }
+    "@types/node": "^20.12.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0"
   }
 }

apps/pigment-css-vite-app/package.json

@@ -10,44 +10,30 @@
   },
   "dependencies": {
     "@pigment-css/react": "workspace:^",
-    "@mui/utils": "next",
-    "@mui/base": "next",
-    "@mui/lab": "next",
-    "@mui/material": "next",
-    "@mui/system": "next",
-    "@mui/icons-material": "next",
-    "clsx": "^2.1.0",
+    "@mui/utils": "^6.0.0-alpha.5",
+    "@mui/base": "^5.0.0-beta.44",
+    "@mui/lab": "^6.0.0-alpha.6",
+    "@mui/material": "^6.0.0-alpha.6",
+    "@mui/system": "^6.0.0-alpha.5",
+    "@mui/icons-material": "^6.0.0-alpha.6",
+    "clsx": "^2.1.1",
     "local-ui-lib": "workspace:^",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3"
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@pigment-css/vite-plugin": "workspace:^",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.2.8",
+    "vite": "5.2.11",
     "vite-plugin-pages": "^0.32.1"
-  },
-  "nx": {
-    "targets": {
-      "preview": {
-        "dependsOn": [
-          "^build"
-        ]
-      },
-      "dev": {
-        "dependsOn": [
-          "^build"
-        ]
-      }
-    }
   }
 }

nx.json

@@ -2,17 +2,25 @@
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "extends": "nx/presets/npm.json",
   "targetDefaults": {
-    "copy-license": {
-      "cache": true,
-      "outputs": ["{projectRoot}/LICENSE"]
-    },
     "build": {
       "cache": true,
       "dependsOn": ["copy-license", "^build"],
       "outputs": ["{projectRoot}/build", "{projectRoot}/dist", "{projectRoot}/.next"]
     },
     "preview": {
       "dependsOn": ["^build"]
+    },
+    "test": {
+      "dependsOn": ["build"]
+    },
+    "test:update": {
+      "dependsOn": ["build"]
+    },
+    "test:ci": {
+      "dependsOn": ["build"]
+    },
+    "test:ci:html": {
+      "dependsOn": ["build"]
     }
   }
 }

package.json

@@ -29,15 +29,10 @@
     "test": "node scripts/test.mjs",
     "tc": "node test/cli.js",
     "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
-    "test:coverage": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:ci": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:html": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"",
-    "test:regressions:build": "webpack --config test/regressions/webpack.config.js",
-    "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
-    "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
-    "test:regressions:server": "serve test/regressions -p 5001",
-    "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:coverage": "nx run-many -t test:ci",
+    "test:coverage:ci": "NODE_ENV=test nx run-many -t test:ci",
+    "test:coverage:html": "NODE_ENV=test nx run-many -t test:ci:html",
+    "test:unit": "nx run-many -t test",
     "test:argos": "node ./scripts/pushArgos.mjs",
     "typescript": "tsc -b tsconfig.typecheck.json",
     "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript",
@@ -65,14 +60,17 @@
     "@next/eslint-plugin-next": "^14.1.4",
     "@octokit/rest": "^20.1.0",
     "@playwright/test": "1.43.0",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/jest-dom": "^6.4.5",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.0",
-    "@types/mocha": "^10.0.6",
     "@types/node": "^18.19.30",
     "@types/react": "^18.2.74",
     "@types/yargs": "^17.0.32",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -100,7 +98,6 @@
     "lerna": "^8.1.2",
     "lodash": "^4.17.21",
     "markdownlint-cli2": "^0.13.0",
-    "mocha": "^10.4.0",
     "nx": "^18.2.3",
     "nyc": "^15.1.0",
     "postcss-styled-syntax": "^0.6.4",
@@ -117,6 +114,7 @@
     "tsx": "^4.7.2",
     "typescript": "^5.4.4",
     "unist-util-visit": "^2.0.3",
+    "vitest": "^1.6.0",
     "yargs": "^17.7.2"
   },
   "packageManager": "[email protected]",

packages/eslint-plugin-material-ui/package.json

@@ -10,7 +10,7 @@
     "@typescript-eslint/parser": "^7.5.0"
   },
   "scripts": {
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000"
+    "test": "echo \"No tests here\""
   },
   "license": "MIT"
 }

packages/pigment-css-react/.gitignore

@@ -1,3 +1,5 @@
 /processors/
 /utils/
 LICENSE
+/html/
+/coverage/

packages/pigment-css-react/package.json

@@ -21,55 +21,58 @@
     "url": "https://opencollective.com/mui-org"
   },
   "scripts": {
-    "clean": "rimraf build types processors utils",
+    "clean": "rimraf build types processors utils coverage html",
     "watch": "tsup --watch --clean false",
     "copy-license": "node ../../scripts/pigment-license.mjs",
     "build": "tsup",
-    "test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'",
-    "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'",
-    "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-react mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'",
+    "test": "vitest run",
+    "test-update": "UPDATE_FIXTURES=true vitest run",
+    "test:ci": "vitest run --coverage --reporter=json",
+    "test:ci:html": "vitest run --coverage --reporter=html",
     "typecheck": "tsc --noEmit -p ."
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/helper-module-imports": "^7.24.3",
-    "@babel/helper-plugin-utils": "^7.24.0",
-    "@babel/parser": "^7.24.4",
-    "@babel/types": "^7.24.0",
+    "@babel/helper-plugin-utils": "^7.24.5",
+    "@babel/parser": "^7.24.5",
+    "@babel/types": "^7.24.5",
     "@emotion/css": "^11.11.2",
     "@emotion/is-prop-valid": "^1.2.2",
     "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.1.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/system": "^6.0.0-alpha.1",
-    "@mui/utils": "^6.0.0-alpha.1",
+    "@mui/system": "^6.0.0-alpha.5",
+    "@mui/utils": "^6.0.0-alpha.5",
     "@wyw-in-js/processor-utils": "^0.5.3",
     "@wyw-in-js/shared": "^0.5.3",
     "@wyw-in-js/transform": "^0.5.3",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "cssesc": "^3.0.0",
     "csstype": "^3.1.3",
     "lodash": "^4.17.21",
-    "stylis": "^4.3.1",
+    "stylis": "^4.3.2",
     "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.24.1",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/babel__helper-plugin-utils": "^7.10.3",
-    "@types/chai": "^4.3.14",
+    "@types/chai": "^4.3.16",
     "@types/cssesc": "^3.0.2",
-    "@types/lodash": "^4.17.0",
-    "@types/mocha": "^10.0.6",
+    "@types/lodash": "^4.17.1",
     "@types/node": "^18.19.31",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.2.55",
-    "@types/stylis": "^4.2.5",
+    "@types/react": "^18.3.1",
+    "@types/stylis": "^4.2.6",
+    "@vitejs/plugin-react": "^4.2.1",
     "chai": "^4.4.1",
     "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0"
+    "react": "^18.3.1"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"
@@ -152,29 +155,12 @@
   },
   "nx": {
     "targets": {
-      "test": {
-        "cache": false,
-        "dependsOn": [
-          "build"
-        ]
-      },
-      "test:update": {
-        "cache": false,
-        "dependsOn": [
-          "build"
-        ]
-      },
-      "test:ci": {
-        "cache": false,
-        "dependsOn": [
-          "build"
-        ]
-      },
       "build": {
         "outputs": [
           "{projectRoot}/build",
-          "{projectRoot}/processors",
-          "{projectRoot}/utils"
+          "{projectRoot}/theme",
+          "{projectRoot}/utils",
+          "{projectRoot}/processors"
         ]
       }
     }

packages/pigment-css-react/tests/Box.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box } from '@pigment-css/react/Box';
+import Box from '@pigment-css/react/Box';
 
 export function App() {
   return (

packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css

@@ -1,4 +1,4 @@
-.sd5jss7 {
+.s102a5ob {
   margin: 0;
   margin-block: 1rem;
   padding: 0;
@@ -7,7 +7,7 @@
   flex-direction: column;
   gap: 0.5rem;
 }
-.sk625fs {
+.s22pi4e {
   display: flex;
   flex-direction: column;
 }