[test] Use vite and vitest for e2e and regression tests #1127

mj12albert · 2024-12-17T07:29:56Z

Test apps built with Vite instead of Webpack
Tests are run with Vitest instead of Mocha
Removed a bunch of unused devDependencies - in particular webfontloader (and some font loading code) is no longer needed as we are loading local font files

Part of #883

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2024-12-17T07:33:24Z

Netlify deploy preview

https://deploy-preview-1127--base-ui.netlify.app/

Generated by 🚫 dangerJS against d0bf4b1

mj12albert · 2024-12-18T05:44:52Z

package.json

-    "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:jsdom": "cross-env NODE_ENV=test VITEST_ENV=jsdom vitest --project @base-ui-components/react --project docs",


These all need to be filtered with --project now that test also includes Vitest workspaces

I noticed that tests in docs weren't being run at all before explicitly specifying the project flag

mj12albert · 2024-12-18T13:20:43Z

test/regressions/main.tsx

-  const [fontState, setFontState] = React.useState('pending');
-  React.useEffect(() => {
-    webfontloader.load({
-      custom: {
-        families: ['Unica 77'],
-        urls: ['../../docs/src/styles.css'],
-      },
-      timeout: 20000,
-      active: () => {
-        setFontState('active');
-      },
-      inactive: () => {
-        setFontState('inactive');
-      },
-    });
-  }, []);


We don't need this as we are not loading webfonts, and the inner TestViewer already waits for font load events

mnajdova

It looks ok to me, everything seem to work as expected, but I would wait for @michaldudak for a final review before merging. I don't expect lot of conflicts, so it would probably be ok sitting for few weeks.

mnajdova · 2024-12-18T13:26:13Z

.eslintrc.js

+      files: ['test/**/*{.ts,.tsx}'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+        'import/no-relative-packages': 'off',


Why switching this off?

Thought it was needed to import the shared vitest config but it's not!

michaldudak

I'm having issues running these tests on Windows - no tests are detected. I suspect this could be related to path separators in globbedRegressionFixtures(test/regressions/main.tsx)

package.json

mj12albert · 2025-01-03T07:04:16Z

suspect this could be related to path separators in globbedRegressionFixtures(test/regressions/main.tsx)

@michaldudak When you run pnpm test:regressions on windows, are the public demos (in docs/src/app/(public)/... picked up by this glob? (or nothing is detected?)

(globbedRegressionFixtures points to an empty directory now, but also it uses a relative path unlike docs/.. which is aliased in the vitest config, not sure if there is any relation)

michaldudak · 2025-01-03T09:41:09Z

I managed to fix the Windows issue.

There are a couple of warnings on the console when running tests:

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

We can hide it by increasing the chunkSizeWarningLimit. We don't care about the chunk size here.

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

I believe the Vite config file must be an ESM module.

mj12albert · 2025-01-03T11:43:31Z

I managed to fix the Windows issue.

Thanks ~ @michaldudak

The console warnings are fixed: https://app.circleci.com/pipelines/github/mui/base-ui/6840/workflows/02371255-ba7b-46e5-9d9f-9155ff899ed7/jobs/59536/parallel-runs/0/steps/0-106

I've also moved the vite config to a shared config as they are identical

michaldudak · 2025-01-03T11:59:20Z

.eslintignore

@@ -7,5 +7,6 @@
 /packages/react/**/*.min.*
 build
 build-tests
+dist


nit: could this directory be named build to be consistent with the rest of the codebase?

Updated! (dist was just the vite default)

michaldudak

LGTM!

Co-authored-by: Michał Dudak <[email protected]>

mj12albert added the test label Dec 17, 2024

mj12albert force-pushed the infra/test-vite branch 6 times, most recently from f21bd83 to c14ce9e Compare December 17, 2024 16:29

mj12albert changed the title ~~[test] Use vite and vitest for regression tests~~ [test] Use vite and vitest for e2e and regression tests Dec 17, 2024

mj12albert force-pushed the infra/test-vite branch 2 times, most recently from 1b7ee44 to 76d77af Compare December 17, 2024 17:23

mj12albert marked this pull request as ready for review December 17, 2024 17:32

mj12albert requested review from atomiks and michaldudak as code owners December 17, 2024 17:32

mj12albert force-pushed the infra/test-vite branch 2 times, most recently from 61a95b6 to 35cd7ff Compare December 18, 2024 05:29

mj12albert commented Dec 18, 2024

View reviewed changes

mj12albert force-pushed the infra/test-vite branch 2 times, most recently from c8868eb to 3298810 Compare December 18, 2024 06:13

mj12albert marked this pull request as draft December 18, 2024 06:27

mj12albert marked this pull request as ready for review December 18, 2024 06:41

mj12albert force-pushed the infra/test-vite branch 2 times, most recently from f3cf49a to d721946 Compare December 18, 2024 12:44

mj12albert requested a review from mnajdova December 18, 2024 13:00

mj12albert force-pushed the infra/test-vite branch from d721946 to 5777772 Compare December 18, 2024 13:02

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 18, 2024

mj12albert force-pushed the infra/test-vite branch from 5777772 to 2442ef5 Compare December 18, 2024 13:05

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 18, 2024

mj12albert commented Dec 18, 2024

View reviewed changes

mnajdova reviewed Dec 18, 2024

View reviewed changes

Merge remote-tracking branch 'upstream/master' into infra/test-vite

77ce77f

mj12albert force-pushed the infra/test-vite branch from 71c89d0 to 77ce77f Compare January 2, 2025 12:19

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 2, 2025

michaldudak reviewed Jan 2, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

mj12albert added 4 commits January 3, 2025 13:22

Update scripts

a9c3ddb

Merge remote-tracking branch 'upstream/master' into infra/test-vite

0983377

Fix resolve.alias

aea0a6e

Update tsconfig

f435534

Fix regression tests on Windows

4b8a17e

mj12albert added 3 commits January 3, 2025 18:52

Merge branch 'master' into infra/test-vite

bed9194

Fix vite config

df676c9

Fix vite CJS deprecation warning

7b6739b

mj12albert force-pushed the infra/test-vite branch from d9131b8 to ccd9290 Compare January 3, 2025 11:32

mj12albert requested a review from colmtuite as a code owner January 3, 2025 11:32

mj12albert added 2 commits January 3, 2025 19:32

Use default vite port

947ca62

Merge remote-tracking branch 'upstream/master' into infra/test-vite

411fbad

mj12albert force-pushed the infra/test-vite branch from ccd9290 to 411fbad Compare January 3, 2025 11:33

mj12albert requested a review from michaldudak January 3, 2025 11:43

michaldudak reviewed Jan 3, 2025

View reviewed changes

Rename dist to build

d0bf4b1

mj12albert force-pushed the infra/test-vite branch from c08c6f2 to d0bf4b1 Compare January 3, 2025 12:24

mj12albert requested a review from michaldudak January 3, 2025 12:29

michaldudak approved these changes Jan 3, 2025

View reviewed changes

mj12albert merged commit 9fb1b40 into mui:master Jan 4, 2025
23 checks passed

mj12albert deleted the infra/test-vite branch January 4, 2025 08:37

mj12albert mentioned this pull request Jan 4, 2025

[infra] Migrate all the tests to vitest and remove mocha and karma remains #883

Open

7 tasks

onehanddev pushed a commit to onehanddev/base-ui that referenced this pull request Jan 8, 2025

[test] Use vite and vitest for e2e and regression tests (mui#1127)

88ad014

Co-authored-by: Michał Dudak <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[test] Use vite and vitest for e2e and regression tests #1127

[test] Use vite and vitest for e2e and regression tests #1127

mj12albert commented Dec 17, 2024 •

edited

Loading

mui-bot commented Dec 17, 2024 •

edited

Loading

mj12albert Dec 18, 2024 •

edited

Loading

mj12albert Dec 18, 2024

mnajdova left a comment

mnajdova Dec 18, 2024

mj12albert Jan 2, 2025

michaldudak left a comment

mj12albert commented Jan 3, 2025

michaldudak commented Jan 3, 2025

mj12albert commented Jan 3, 2025

michaldudak Jan 3, 2025

mj12albert Jan 3, 2025

michaldudak left a comment

[test] Use vite and vitest for e2e and regression tests #1127

[test] Use vite and vitest for e2e and regression tests #1127

Conversation

mj12albert commented Dec 17, 2024 • edited Loading

mui-bot commented Dec 17, 2024 • edited Loading

Netlify deploy preview

mj12albert Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

mj12albert Dec 18, 2024

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova Dec 18, 2024

Choose a reason for hiding this comment

mj12albert Jan 2, 2025

Choose a reason for hiding this comment

michaldudak left a comment

Choose a reason for hiding this comment

mj12albert commented Jan 3, 2025

michaldudak commented Jan 3, 2025

mj12albert commented Jan 3, 2025

michaldudak Jan 3, 2025

Choose a reason for hiding this comment

mj12albert Jan 3, 2025

Choose a reason for hiding this comment

michaldudak left a comment

Choose a reason for hiding this comment

mj12albert commented Dec 17, 2024 •

edited

Loading

mui-bot commented Dec 17, 2024 •

edited

Loading

mj12albert Dec 18, 2024 •

edited

Loading