Skip to content

Commit e2dceb2

Browse files
JCQuintasJanpot
JCQuintas
and
Janpot
authored
[code-infra] Replace mocha with vitest for browser & jsdom tests (#14508)
Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com> Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
1 parent f1be6ab commit e2dceb2

File tree

94 files changed

+1454
-886
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+1454
-886
lines changed

‎.circleci/config.yml

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,19 @@ parameters:
2626
type: string
2727
default: ''
2828

29+
default-parameters: &default-parameters
30+
react-version:
31+
description: The version of react to be used
32+
type: string
33+
default: << pipeline.parameters.react-version >>
34+
e2e-base-url:
35+
description: The base url for running end-to-end test
36+
type: string
37+
default: << pipeline.parameters.e2e-base-url >>
38+
2939
default-job: &default-job
3040
parameters:
31-
react-version:
32-
description: The version of react to be used
33-
type: string
34-
default: << pipeline.parameters.react-version >>
35-
e2e-base-url:
36-
description: The base url for running end-to-end test
37-
type: string
38-
default: << pipeline.parameters.e2e-base-url >>
41+
<<: *default-parameters
3942
environment:
4043
# expose it globally otherwise we have to thread it from each job to the install command
4144
BROWSERSTACK_FORCE: << pipeline.parameters.browserstack-force >>
@@ -150,21 +153,46 @@ jobs:
150153
- install_js:
151154
react-version: << parameters.react-version >>
152155
- run:
153-
name: Tests fake browser
154-
command: pnpm test:coverage
155-
- run:
156-
name: Check coverage generated
157-
command: |
158-
if ! [[ -s coverage/lcov.info ]]
159-
then
160-
exit 1
161-
fi
162-
- run:
163-
name: Coverage
164-
command: |
165-
curl -Os https://uploader.codecov.io/latest/linux/codecov
166-
chmod +x codecov
167-
./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_VERSION-jsdom"
156+
name: Test JSDOM
157+
command: pnpm test:unit:jsdom
158+
159+
test_browser:
160+
<<: *default-job
161+
resource_class: medium+
162+
steps:
163+
- checkout
164+
- install_js:
165+
playwright: true
166+
react-version: << parameters.react-version >>
167+
- when:
168+
condition:
169+
not:
170+
equal: ['stable', << parameters.react-version >>]
171+
steps:
172+
- run:
173+
name: Test Browser
174+
command: pnpm test:unit:browser
175+
- when:
176+
condition:
177+
equal: ['stable', << parameters.react-version >>]
178+
steps:
179+
- run:
180+
name: Test Browser + Coverage
181+
command: pnpm test:unit:browser --coverage
182+
- run:
183+
name: Check coverage generated
184+
command: |
185+
if ! [[ -s coverage/lcov.info ]]
186+
then
187+
exit 1
188+
fi
189+
- run:
190+
name: Coverage
191+
command: |
192+
curl -Os https://uploader.codecov.io/latest/linux/codecov
193+
chmod +x codecov
194+
./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_VERSION-browser"
195+
168196
test_lint:
169197
<<: *default-job
170198
steps:
@@ -242,21 +270,6 @@ jobs:
242270
else
243271
exit 0
244272
fi
245-
246-
test_browser:
247-
<<: *default-job
248-
steps:
249-
- checkout
250-
- install_js:
251-
playwright: true
252-
react-version: << parameters.react-version >>
253-
- run:
254-
name: Tests real browsers
255-
command: pnpm test:karma
256-
- store_artifacts:
257-
# hardcoded in karma-webpack
258-
path: /tmp/_karma_webpack_
259-
destination: artifact-file
260273
test_types:
261274
<<: *default-job
262275
steps:
@@ -353,9 +366,7 @@ workflows:
353366
jobs:
354367
- checkout:
355368
<<: *default-context
356-
- test_e2e_website:
357-
requires:
358-
- checkout
369+
- test_e2e_website
359370

360371
additional-tests:
361372
when:

‎babel.config.js

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -105,30 +105,6 @@ module.exports = function getBabelConfig(api) {
105105
],
106106
];
107107

108-
if (process.env.NODE_ENV === 'test') {
109-
plugins.push(['@babel/plugin-transform-export-namespace-from']);
110-
// We replace `date-fns` imports with an aliased `date-fns@v2` version installed as `date-fns-v2` for tests.
111-
plugins.push([
112-
'babel-plugin-replace-imports',
113-
{
114-
test: /date-fns/i,
115-
replacer: 'date-fns-v2',
116-
// This option is provided by the `patches/babel-plugin-replace-imports@1.0.2.patch` patch
117-
filenameIncludes: 'src/AdapterDateFnsV2/',
118-
},
119-
]);
120-
plugins.push([
121-
'babel-plugin-replace-imports',
122-
{
123-
test: /date-fns-jalali/i,
124-
replacer: 'date-fns-jalali-v2',
125-
// This option is provided by the `patches/babel-plugin-replace-imports@1.0.2.patch` patch
126-
filenameIncludes: 'src/AdapterDateFnsJalaliV2/',
127-
},
128-
'replace-date-fns-jalali-imports',
129-
]);
130-
}
131-
132108
if (process.env.NODE_ENV === 'production') {
133109
if (!process.env.TEST_BUILD) {
134110
plugins.push(['babel-plugin-react-remove-properties', { properties: ['data-testid'] }]);

‎docs/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"resolveJsonModule": true,
1010
"skipLibCheck": true,
1111
"esModuleInterop": true,
12-
"incremental": true
12+
"incremental": true,
13+
"types": ["@mui/internal-test-utils/initMatchers", "chai-dom", "mocha"]
1314
},
1415
"include": ["next-env.d.ts", "next.config.mjs", "docs-env.d.ts", "src", "pages/**/*.ts*", "data"],
1516
"exclude": ["docs/.next", "docs/export", "pages/playground"]

‎docs/vitest.config.jsdom.mts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { mergeConfig, defineProject } from 'vitest/config';
2+
import sharedConfig from '../vitest.shared.mts';
3+
import { getTestName } from '../scripts/getTestName.mts';
4+
5+
export default mergeConfig(
6+
sharedConfig,
7+
defineProject({
8+
test: {
9+
name: getTestName(import.meta.url),
10+
environment: 'jsdom',
11+
},
12+
}),
13+
);

‎mui-env.d.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
export {}; // Ensure this file is treated as a module to avoid global scope TS error
22

33
declare global {
4+
interface MUIEnv {
5+
NODE_ENV?: string;
6+
}
7+
8+
interface Process {
9+
env: MUIEnv;
10+
}
11+
412
// support process.env.NODE_ENV === '...'
513
// @ts-ignore
6-
const process: {
7-
env: {
8-
NODE_ENV?: string;
9-
};
10-
};
14+
const process: Process;
1115
}

‎package.json

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,12 @@
3232
"proptypes": "tsx ./docs/scripts/generateProptypes.ts",
3333
"size:snapshot": "node --max-old-space-size=2048 ./scripts/sizeSnapshot/create",
3434
"size:why": "pnpm size:snapshot --analyze --accurateBundles",
35-
"tc": "node test/cli.js",
36-
"test": "node scripts/test.mjs",
37-
"test:coverage": "cross-env NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=test TZ=UTC BABEL_ENV=coverage nyc mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' && nyc report -r lcovonly",
38-
"test:coverage:html": "cross-env NODE_ENV=test TZ=UTC BABEL_ENV=coverage nyc mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' && nyc report --reporter=html",
39-
"test:coverage:inspect": "cross-env NODE_ENV=test TZ=UTC BABEL_ENV=coverage mocha --inspect-brk",
40-
"test:karma": "cross-env NODE_ENV=test TZ=UTC karma start test/karma.conf.js",
41-
"test:karma:parallel": "cross-env NODE_ENV=test TZ=UTC PARALLEL=true karma start test/karma.conf.js",
42-
"test:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
35+
"test": "pnpm test:unit:jsdom",
36+
"test:jsdom": "pnpm test:unit:jsdom",
37+
"test:unit": "pnpm test:unit:jsdom",
38+
"test:unit:jsdom": "cross-env NODE_ENV=test TZ=UTC vitest",
39+
"test:browser": "pnpm test:unit:browser",
40+
"test:unit:browser": "cross-env NODE_ENV=test TZ=UTC BROWSER=true vitest",
4341
"test:e2e": "pnpm run release:build && cd test/e2e && pnpm run start",
4442
"test:e2e-website": "npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
4543
"test:e2e-website:dev": "PLAYWRIGHT_TEST_BASE_URL=http://localhost:3001 npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
@@ -99,7 +97,6 @@
9997
"@playwright/test": "^1.52.0",
10098
"@types/babel__core": "^7.20.5",
10199
"@types/babel__traverse": "^7.20.7",
102-
"@types/chai": "^4.3.20",
103100
"@types/chai-dom": "^1.11.3",
104101
"@types/fs-extra": "^11.0.4",
105102
"@types/karma": "^6.3.9",
@@ -113,6 +110,9 @@
113110
"@types/yargs": "^17.0.33",
114111
"@typescript-eslint/eslint-plugin": "^8.31.1",
115112
"@typescript-eslint/parser": "^8.31.1",
113+
"@vitejs/plugin-react": "^4.3.2",
114+
"@vitest/browser": "^3.1.2",
115+
"@vitest/coverage-v8": "^3.1.2",
116116
"@vvago/vale": "^3.11.2",
117117
"autoprefixer": "^10.4.21",
118118
"axe-core": "4.10.3",
@@ -121,7 +121,6 @@
121121
"babel-plugin-module-resolver": "^5.0.2",
122122
"babel-plugin-optimize-clsx": "^2.6.2",
123123
"babel-plugin-react-remove-properties": "^0.3.0",
124-
"babel-plugin-replace-imports": "^1.0.2",
125124
"babel-plugin-search-and-replace": "^1.1.1",
126125
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
127126
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -135,6 +134,7 @@
135134
"danger": "^13.0.4",
136135
"date-fns-jalali-v2": "npm:date-fns-jalali@2.30.0-0",
137136
"date-fns-v2": "npm:date-fns@2.30.0",
137+
"esbuild": "^0.25.3",
138138
"eslint": "^8.57.1",
139139
"eslint-config-airbnb": "^19.0.4",
140140
"eslint-config-airbnb-base": "^15.0.0",
@@ -169,6 +169,7 @@
169169
"karma-webpack": "^5.0.1",
170170
"lerna": "^8.2.2",
171171
"lodash": "^4.17.21",
172+
"magic-string": "^0.30.17",
172173
"markdownlint-cli2": "^0.17.2",
173174
"mocha": "^11.2.2",
174175
"moment": "^2.30.1",
@@ -192,6 +193,8 @@
192193
"unist-util-visit": "^5.0.0",
193194
"util": "^0.12.5",
194195
"vite": "^6.3.4",
196+
"vitest": "3.1.2",
197+
"vitest-fail-on-console": "^0.7.1",
195198
"webpack": "^5.99.7",
196199
"webpack-bundle-analyzer": "^4.10.2",
197200
"webpack-cli": "^6.0.1",
@@ -204,8 +207,7 @@
204207
},
205208
"pnpm": {
206209
"patchedDependencies": {
207-
"karma-mocha@2.0.1": "patches/karma-mocha@2.0.1.patch",
208-
"babel-plugin-replace-imports@1.0.2": "patches/babel-plugin-replace-imports@1.0.2.patch"
210+
"karma-mocha@2.0.1": "patches/karma-mocha@2.0.1.patch"
209211
},
210212
"onlyBuiltDependencies": [
211213
"@swc/core",

‎packages/x-charts-pro/src/BarChartPro/BarChartPro.zoom.test.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,7 @@ describeSkipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
6464
}
6565
});
6666

67-
it('should zoom on wheel', async function test() {
68-
this.timeout(10000);
67+
it('should zoom on wheel', async () => {
6968
const onZoomChange = sinon.spy();
7069
const { user } = render(
7170
<BarChartPro {...barChartProps} onZoomChange={onZoomChange} />,

‎packages/x-charts-pro/src/LineChartPro/LineChartPro.zoom.test.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@ describeSkipIf(isJSDOM)('<LineChartPro /> - Zoom', () => {
6565
}
6666
});
6767

68-
it('should zoom on wheel', async function test() {
69-
this.timeout(10000);
68+
it('should zoom on wheel', async () => {
7069
const onZoomChange = sinon.spy();
7170
const { user } = render(
7271
<LineChartPro {...lineChartProps} onZoomChange={onZoomChange} />,

‎packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,7 @@ describeSkipIf(isJSDOM)('<ScatterChartPro /> - Zoom', () => {
9191
}
9292
});
9393

94-
it('should zoom on wheel', async function test() {
95-
this.timeout(10000);
94+
it('should zoom on wheel', async () => {
9695
const onZoomChange = sinon.spy();
9796
const { user } = render(
9897
<ScatterChartPro {...scatterChartProps} onZoomChange={onZoomChange} />,

‎packages/x-charts-pro/vitest.config.browser.mts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/// <reference types="@vitest/browser/providers/playwright" />
2+
import { mergeConfig } from 'vitest/config';
3+
import sharedConfig from '../../vitest.shared.mts';
4+
import { getTestName } from '../../scripts/getTestName.mts';
5+
6+
export default mergeConfig(sharedConfig, {
7+
test: {
8+
name: getTestName(import.meta.url),
9+
environment: 'browser',
10+
browser: {
11+
enabled: true,
12+
instances: [
13+
{
14+
browser: 'chromium',
15+
},
16+
],
17+
},
18+
},
19+
});

‎packages/x-charts-pro/vitest.config.jsdom.mts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { mergeConfig } from 'vitest/config';
2+
import sharedConfig from '../../vitest.shared.mts';
3+
import { getTestName } from '../../scripts/getTestName.mts';
4+
5+
export default mergeConfig(sharedConfig, {
6+
test: {
7+
name: getTestName(import.meta.url),
8+
environment: 'jsdom',
9+
},
10+
});

‎packages/x-charts-vendor/vitest.config.browser.mts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/// <reference types="@vitest/browser/providers/playwright" />
2+
import { mergeConfig } from 'vitest/config';
3+
import sharedConfig from '../../vitest.shared.mts';
4+
import { getTestName } from '../../scripts/getTestName.mts';
5+
6+
export default mergeConfig(sharedConfig, {
7+
test: {
8+
name: getTestName(import.meta.url),
9+
environment: 'browser',
10+
browser: {
11+
enabled: true,
12+
instances: [
13+
{
14+
browser: 'chromium',
15+
},
16+
],
17+
},
18+
},
19+
});

‎packages/x-charts-vendor/vitest.config.jsdom.mts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { mergeConfig } from 'vitest/config';
2+
import sharedConfig from '../../vitest.shared.mts';
3+
import { getTestName } from '../../scripts/getTestName.mts';
4+
5+
export default mergeConfig(sharedConfig, {
6+
test: {
7+
name: getTestName(import.meta.url),
8+
environment: 'jsdom',
9+
},
10+
});

‎packages/x-charts/vitest.config.browser.mts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/// <reference types="@vitest/browser/providers/playwright" />
2+
import { mergeConfig } from 'vitest/config';
3+
import sharedConfig from '../../vitest.shared.mts';
4+
import { getTestName } from '../../scripts/getTestName.mts';
5+
6+
export default mergeConfig(sharedConfig, {
7+
test: {
8+
name: getTestName(import.meta.url),
9+
environment: 'browser',
10+
browser: {
11+
enabled: true,
12+
instances: [
13+
{
14+
browser: 'chromium',
15+
},
16+
],
17+
},
18+
},
19+
});

0 commit comments

Comments
 (0)