diff --git a/.circleci/config.yml b/.circleci/config.yml index a994660457..b4e357a462 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -150,17 +150,17 @@ jobs: - install_js: react-version: << parameters.react-version >> - run: - name: Tests fake browser - command: pnpm test:coverage:ci + name: Run tests on JSDOM + command: pnpm test:jsdom --coverage - run: - name: Check coverage generated + name: Check if coverage report is generated command: | if ! [[ -s coverage/lcov.info ]] then exit 1 fi - run: - name: Coverage + name: Upload coverage report to Codecov command: | curl -Os https://uploader.codecov.io/latest/linux/codecov chmod +x codecov @@ -295,17 +295,17 @@ jobs: react-version: << parameters.react-version >> browsers: true - run: - name: Tests real browsers - command: pnpm test:karma + name: Run tests on headless Chromium + command: pnpm test:chromium --coverage - run: - name: Check coverage generated + name: Check if coverage report is generated command: | if ! [[ -s coverage/lcov.info ]] then exit 1 fi - run: - name: Coverage + name: Upload coverage report to Codecov command: | curl -Os https://uploader.codecov.io/latest/linux/codecov chmod +x codecov diff --git a/docs/package.json b/docs/package.json index 4344d68ada..d457c6644d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -64,7 +64,7 @@ "@babel/preset-typescript": "^7.24.7", "@mui/internal-docs-utils": "^1.0.15", "@mui/internal-scripts": "^1.0.25", - "@mui/internal-test-utils": "1.0.18", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils", "@types/chai": "^4.3.20", "@types/gtag.js": "^0.0.20", "@types/hast": "^3.0.4", diff --git a/docs/src/blocks/sandbox/packDemo.test.ts b/docs/src/blocks/sandbox/packDemo.test.ts index 32f38038a9..ba179ca74f 100644 --- a/docs/src/blocks/sandbox/packDemo.test.ts +++ b/docs/src/blocks/sandbox/packDemo.test.ts @@ -1,4 +1,4 @@ -import { describe, it } from 'mocha'; +import { describe, it } from 'vitest'; import { expect } from 'chai'; import { DemoFile } from 'docs/src/blocks/Demo'; import { packDemo } from './packDemo'; diff --git a/docs/vitest.config.ts b/docs/vitest.config.ts new file mode 100644 index 0000000000..5c2bc443ab --- /dev/null +++ b/docs/vitest.config.ts @@ -0,0 +1,15 @@ +import { mergeConfig, defineProject } from 'vitest/config'; +import sharedConfig from '../vitest.shared'; + +export default mergeConfig( + sharedConfig, + defineProject({ + test: { + environment: 'node', + browser: { + enabled: false, + name: 'node', + }, + }, + }), +); diff --git a/package.json b/package.json index c3ea112525..276f144beb 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,9 @@ "test:regressions:server": "serve test/regressions -p 5001", "test:umd": "node packages/mui-material/test/umd/run.js", "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", + "test:jsdom": "cross-env NODE_ENV=test VITEST_ENV=jsdom vitest", + "test:chromium": "cross-env NODE_ENV=test VITEST_ENV=chromium vitest", + "test:firefox": "cross-env NODE_ENV=test VITEST_ENV=firefox vitest", "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "tsc -b tsconfig.json", "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts", @@ -79,7 +82,7 @@ "@mui/internal-docs-utils": "^1.0.15", "@mui/internal-markdown": "^1.0.18", "@mui/internal-scripts": "^1.0.25", - "@mui/internal-test-utils": "1.0.18", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils", "@mui/monorepo": "github:mui/material-ui#v6.1.5", "@mui/utils": "6.1.5", "@next/eslint-plugin-next": "^14.2.13", @@ -93,6 +96,10 @@ "@types/yargs": "^17.0.33", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", + "@vitejs/plugin-react": "^4.3.2", + "@vitest/browser": "^2.1.3", + "@vitest/coverage-v8": "^2.1.3", + "@vitest/ui": "2.1.3", "babel-loader": "^9.2.1", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-macros": "^3.1.0", @@ -100,6 +107,7 @@ "babel-plugin-optimize-clsx": "^2.6.2", "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "chai-dom": "^1.12.0", "chalk": "^5.3.0", "compression-webpack-plugin": "^11.1.0", "concurrently": "^8.2.2", @@ -149,7 +157,9 @@ "prettier-plugin-tailwindcss": "^0.6.8", "pretty-quick": "^4.0.0", "process": "^0.11.10", + "react": "^18.3.1", "react-docgen": "^5.4.3", + "react-dom": "^18.3.1", "recast": "^0.23.9", "remark": "^15.0.1", "rimraf": "^5.0.10", @@ -163,6 +173,7 @@ "tsx": "^4.8.2", "typescript": "^5.4.5", "unist-util-visit": "^5.0.0", + "vitest": "^2.1.3", "webpack": "^5.91.0", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index dc2bc4ae55..dc40704248 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -52,7 +52,7 @@ "use-sync-external-store": "^1.2.2" }, "devDependencies": { - "@mui/internal-test-utils": "1.0.18", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils", "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.20", diff --git a/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.test.ts b/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.test.ts index 7d85215e80..806101ee5d 100644 --- a/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.test.ts +++ b/packages/mui-base/src/AlertDialog/Root/AlertDialogRoot.test.ts @@ -1 +1,5 @@ // This file must be present for the doc gen to work + +describe('', () => { + it('no-op', () => {}); +}); diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx index 3033392a2d..3ed5243e25 100644 --- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx +++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx @@ -221,12 +221,7 @@ describe('', () => { }); describe('form handling', () => { - it('should toggle the checkbox when a parent label is clicked', async function test() { - // Clicking the label causes unrelated browser tests to fail. - if (!isJSDOM) { - this.skip(); - } - + it('should toggle the checkbox when a parent label is clicked', async () => { const { getByTestId, getAllByRole } = await render(