Replace Jest with Vitest #2053

connor-baer · 2023-04-23T15:00:59Z

Purpose

While testing out #2020, I discovered that some of the required dependencies are full ESM packages. ESM cannot be imported into CJS, so we need to migrate Circuit UI to ESM to be able to use web components. This migration is inevitable anyway and the ecosystem seems ready enough at this point, with one notable exception: Jest. Though Jest claims to have experimental support for ESM, the setup is cumbersome and frustratingly buggy.

Vitest is a modern test framework built on top of Vite with first-class support for ESM, TypeScript and JSX. Its API is compatible with Jest's.

Approach and changes

Uninstall Jest and clean up related files
Install and configure Vitest
Run the vitest-codemod to add imports and replace Jest helper functions
Change the extension of JavaScript files that contain JSX to .jsx

I've carefully reviewed all files, including all snapshots.

Definition of done

changeset-bot · 2023-04-23T15:01:02Z

⚠️ No Changeset found

Latest commit: 17475d2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2023-04-23T15:01:02Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
oss-circuit-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2023 1:22pm

codecov · 2023-04-23T17:32:48Z

Codecov Report

Merging #2053 (20f3bb9) into next (20f3bb9) will not change coverage.
The diff coverage is n/a.

❗ Current head 20f3bb9 differs from pull request most recent head 17475d2. Consider uploading reports for the commit 17475d2 to get more accurate results

@@           Coverage Diff           @@
##             next    #2053   +/-   ##
=======================================
  Coverage   92.12%   92.12%           
=======================================
  Files         165      165           
  Lines        3453     3453           
  Branches     1188     1188           
=======================================
  Hits         3181     3181           
  Misses        254      254           
  Partials       18       18

connor-baer · 2023-04-24T06:49:43Z

packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap


-exports[`BaseStylesService should return the global base styles 1`] = `"@font-face{font-family:'aktiv-grotesk';font-weight:400;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');}@font-face{font-family:'aktiv-grotesk';font-weight:700;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');}:root{--cui-bg-normal:#ffffff;--cui-bg-normal-hovered:#f5f5f5;--cui-bg-normal-pressed:#e6e6e6;--cui-bg-normal-disabled:rgba(255, 255, 255, 0.4);--cui-bg-subtle:#f5f5f5;--cui-bg-subtle-hovered:#e6e6e6;--cui-bg-subtle-pressed:#cccccc;--cui-bg-subtle-disabled:rgba(245, 245, 245, 0.4);--cui-bg-highlight:#e6e6e6;--cui-bg-highlight-hovered:#cccccc;--cui-bg-highlight-pressed:#999999;--cui-bg-highlight-disabled:rgba(230, 230, 230, 0.4);--cui-bg-strong:#000000;--cui-bg-strong-hovered:#000000;--cui-bg-strong-pressed:#000000;--cui-bg-strong-disabled:rgba(0, 0, 0, 0.4);--cui-bg-accent:#ebf4ff;--cui-bg-accent-hovered:#dbe9ff;--cui-bg-accent-pressed:#c7dbff;--cui-bg-accent-disabled:rgba(235, 244, 255, 0.4);--cui-bg-accent-strong:#3064e3;--cui-bg-accent-strong-hovered:#1c51d3;--cui-bg-accent-strong-pressed:#10399e;--cui-bg-accent-strong-disabled:rgba(48, 100, 227, 0.4);--cui-bg-success:#e9fbe9;--cui-bg-success-hovered:#d7f8d7;--cui-bg-success-pressed:#c1e8c1;--cui-bg-success-disabled:rgba(193, 232, 193, 0.4);--cui-bg-success-strong:#018850;--cui-bg-success-strong-hovered:#007a4e;--cui-bg-success-strong-pressed:#016c26;--cui-bg-success-strong-disabled:rgba(1, 135, 48, 0.4);--cui-bg-warning:#fdf4db;--cui-bg-warning-hovered:#faeec6;--cui-bg-warning-pressed:#f5dea3;--cui-bg-warning-disabled:rgba(245, 222, 163, 0.4);--cui-bg-warning-strong:#e87c00;--cui-bg-warning-strong-hovered:#cc6d00;--cui-bg-warning-strong-pressed:#b25c00;--cui-bg-warning-strong-disabled:rgba(232, 124, 0, 0.4);--cui-bg-danger:#fbe9e7;--cui-bg-danger-hovered:#fcddd9;--cui-bg-danger-pressed:#f7ccc7;--cui-bg-danger-disabled:rgba(247, 204, 199, 0.4);--cui-bg-danger-strong:#de331d;--cui-bg-danger-strong-hovered:#bd2c19;--cui-bg-danger-strong-pressed:#9e2415;--cui-bg-danger-strong-disabled:rgba(222, 51, 29, 0.4);--cui-bg-promo:#f5edfe;--cui-bg-promo-hovered:#ede0fc;--cui-bg-promo-pressed:#e0c9f8;--cui-bg-promo-disabled:rgba(224, 201, 248, 0.4);--cui-bg-promo-strong:#9e33e0;--cui-bg-promo-strong-hovered:#8a1ecc;--cui-bg-promo-strong-pressed:#7219a9;--cui-bg-promo-strong-disabled:rgba(149, 53, 208, 0.4);--cui-fg-normal:#1a1a1a;--cui-fg-normal-hovered:#1a1a1a;--cui-fg-normal-pressed:#1a1a1a;--cui-fg-normal-disabled:rgba(26, 26, 26, 0.4);--cui-fg-subtle:#666666;--cui-fg-subtle-hovered:#333333;--cui-fg-subtle-pressed:#1a1a1a;--cui-fg-subtle-disabled:rgba(102, 102, 102, 0.4);--cui-fg-placeholder:#999999;--cui-fg-placeholder-hovered:#999999;--cui-fg-placeholder-pressed:#999999;--cui-fg-placeholder-disabled:rgba(153, 153, 153, 0.4);--cui-fg-on-strong:#ffffff;--cui-fg-on-strong-hovered:#ffffff;--cui-fg-on-strong-pressed:#ffffff;--cui-fg-on-strong-disabled:rgba(255, 255, 255, 0.4);--cui-fg-accent:#3064e3;--cui-fg-accent-hovered:#1c51d3;--cui-fg-accent-pressed:#10399e;--cui-fg-accent-disabled:rgba(48, 100, 227, 0.4);--cui-fg-success:#018850;--cui-fg-success-hovered:#007a4e;--cui-fg-success-pressed:#016c26;--cui-fg-success-disabled:rgba(1, 135, 48, 0.4);--cui-fg-warning:#e27900;--cui-fg-warning-hovered:#cc6d00;--cui-fg-warning-pressed:#b25c00;--cui-fg-warning-disabled:rgba(232, 124, 0, 0.4);--cui-fg-danger:#de331d;--cui-fg-danger-hovered:#bd2c19;--cui-fg-danger-pressed:#9e2415;--cui-fg-danger-disabled:rgba(222, 51, 29, 0.4);--cui-fg-promo:#9e33e0;--cui-fg-promo-hovered:#8a1ecc;--cui-fg-promo-pressed:#7219a9;--cui-fg-promo-disabled:rgba(149, 53, 208, 0.4);--cui-border-normal:#cccccc;--cui-border-normal-hovered:#999999;--cui-border-normal-pressed:#666666;--cui-border-normal-disabled:rgba(204, 204, 204, 0.4);--cui-border-subtle:#e6e6e6;--cui-border-subtle-hovered:#cccccc;--cui-border-subtle-pressed:#999999;--cui-border-subtle-disabled:rgba(230, 230, 230, 0.4);--cui-border-divider:#cccccc;--cui-border-divider-hovered:#999999;--cui-border-divider-pressed:#666666;--cui-border-divider-disabled:rgba(204, 204, 204, 0.4);--cui-border-strong:#1a1a1a;--cui-border-strong-hovered:#000000;--cui-border-strong-pressed:#000000;--cui-border-strong-disabled:rgba(0, 0, 0, 0.4);--cui-border-accent:#3064e3;--cui-border-accent-hovered:#1c51d3;--cui-border-accent-pressed:#10399e;--cui-border-accent-disabled:rgba(48, 100, 227, 0.4);--cui-border-success:#018850;--cui-border-success-hovered:#007a4e;--cui-border-success-pressed:#016c26;--cui-border-success-disabled:rgba(1, 135, 48, 0.4);--cui-border-warning:#e87c00;--cui-border-warning-hovered:#cc6d00;--cui-border-warning-pressed:#b25c00;--cui-border-warning-disabled:rgba(232, 124, 0, 0.4);--cui-border-danger:#de331d;--cui-border-danger-hovered:#bd2c19;--cui-border-danger-pressed:#9e2415;--cui-border-danger-disabled:rgba(222, 51, 29, 0.4);--cui-border-promo:#9e33e0;--cui-border-promo-hovered:#8a1ecc;--cui-border-promo-pressed:#7219a9;--cui-border-promo-disabled:rgba(149, 53, 208, 0.4);--cui-bg-overlay:rgba(0, 0, 0, 0.4);--cui-bg-elevated:#ffffff;--cui-border-focus:#ebf4ff;}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;overflow-x:hidden;[type='button']{appearance:none;}}body{background-color:var(--cui-bg-normal);color:var(--cui-fg-normal);font-size:1rem;line-height:1.5rem;;label:typography;;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;};label:createBaseStyles;"`;
+exports[`BaseStylesService > should return the global base styles 1`] = `


Snapshots of styles returned by Emotion.js' css function are no longer minified. I suspect that's because the Babel plugin isn't applied anymore. This is an improvement as it makes it easier to review changes line by line.

Agreed! But it also means that tests become a bit less similar to production, if the babel plugin is still applied in bundling (which I assume it is)

Circuit UI is bundled with Typescript; Babel isn't involved there. Consumers of Circuit UI might apply the plugin, though I would argue that we should rely on the plugin being reliable (we shouldn't test third-party code).

Yes yes I meant that it tends to be used in production in app bundles. Not testing third-party code makes sense but we still use emotion and using the plugin is still pretty standard

It's becoming less common since Next.js switched to SWC as a transpiler. By that logic, we should also test with the SWC Emotion plugin.

I don't think we need to test with either and can rely on bug reports from developers should issues arise.

packages/circuit-ui/components/Grid/utils.spec.ts

packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx

packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx

packages/circuit-ui/components/ToastContext/ToastContext.tsx

packages/cna-template/template/package.json

robinmetral

Looks great! Kudos for the huge effort here 👏

A few high-level questions because I'm not super familiar with Vitest and this is a big change (would have been great to open an RFC issue first, IMO):

any current or future downside of using this without Vite as our bundler¹?
If we were to e.g. switch bundling from TSC to rollup or even vite itself, how would it look?
for example: this effectively means components are bundled with vite in tests, and with tsc in prod, right? This would mean that tests are less reliable because less similar to what users get. It seems that the reason vitest was created is exactly that jest didn't have great support for bundling with vite.
"compatible with the Jest API" 👉 by design, or as a helper for people who migrate? Should we be writing tests in a different way moving forward?

or transpiler in our case. I mean ESNext TypeScript 👉 optimized JS compatible with older browsers ↩

packages/eslint-plugin-circuit-ui/vitest.config.ts

robinmetral · 2023-04-24T08:40:42Z

packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap


-exports[`BaseStylesService should return the global base styles 1`] = `"@font-face{font-family:'aktiv-grotesk';font-weight:400;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');}@font-face{font-family:'aktiv-grotesk';font-weight:700;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');}:root{--cui-bg-normal:#ffffff;--cui-bg-normal-hovered:#f5f5f5;--cui-bg-normal-pressed:#e6e6e6;--cui-bg-normal-disabled:rgba(255, 255, 255, 0.4);--cui-bg-subtle:#f5f5f5;--cui-bg-subtle-hovered:#e6e6e6;--cui-bg-subtle-pressed:#cccccc;--cui-bg-subtle-disabled:rgba(245, 245, 245, 0.4);--cui-bg-highlight:#e6e6e6;--cui-bg-highlight-hovered:#cccccc;--cui-bg-highlight-pressed:#999999;--cui-bg-highlight-disabled:rgba(230, 230, 230, 0.4);--cui-bg-strong:#000000;--cui-bg-strong-hovered:#000000;--cui-bg-strong-pressed:#000000;--cui-bg-strong-disabled:rgba(0, 0, 0, 0.4);--cui-bg-accent:#ebf4ff;--cui-bg-accent-hovered:#dbe9ff;--cui-bg-accent-pressed:#c7dbff;--cui-bg-accent-disabled:rgba(235, 244, 255, 0.4);--cui-bg-accent-strong:#3064e3;--cui-bg-accent-strong-hovered:#1c51d3;--cui-bg-accent-strong-pressed:#10399e;--cui-bg-accent-strong-disabled:rgba(48, 100, 227, 0.4);--cui-bg-success:#e9fbe9;--cui-bg-success-hovered:#d7f8d7;--cui-bg-success-pressed:#c1e8c1;--cui-bg-success-disabled:rgba(193, 232, 193, 0.4);--cui-bg-success-strong:#018850;--cui-bg-success-strong-hovered:#007a4e;--cui-bg-success-strong-pressed:#016c26;--cui-bg-success-strong-disabled:rgba(1, 135, 48, 0.4);--cui-bg-warning:#fdf4db;--cui-bg-warning-hovered:#faeec6;--cui-bg-warning-pressed:#f5dea3;--cui-bg-warning-disabled:rgba(245, 222, 163, 0.4);--cui-bg-warning-strong:#e87c00;--cui-bg-warning-strong-hovered:#cc6d00;--cui-bg-warning-strong-pressed:#b25c00;--cui-bg-warning-strong-disabled:rgba(232, 124, 0, 0.4);--cui-bg-danger:#fbe9e7;--cui-bg-danger-hovered:#fcddd9;--cui-bg-danger-pressed:#f7ccc7;--cui-bg-danger-disabled:rgba(247, 204, 199, 0.4);--cui-bg-danger-strong:#de331d;--cui-bg-danger-strong-hovered:#bd2c19;--cui-bg-danger-strong-pressed:#9e2415;--cui-bg-danger-strong-disabled:rgba(222, 51, 29, 0.4);--cui-bg-promo:#f5edfe;--cui-bg-promo-hovered:#ede0fc;--cui-bg-promo-pressed:#e0c9f8;--cui-bg-promo-disabled:rgba(224, 201, 248, 0.4);--cui-bg-promo-strong:#9e33e0;--cui-bg-promo-strong-hovered:#8a1ecc;--cui-bg-promo-strong-pressed:#7219a9;--cui-bg-promo-strong-disabled:rgba(149, 53, 208, 0.4);--cui-fg-normal:#1a1a1a;--cui-fg-normal-hovered:#1a1a1a;--cui-fg-normal-pressed:#1a1a1a;--cui-fg-normal-disabled:rgba(26, 26, 26, 0.4);--cui-fg-subtle:#666666;--cui-fg-subtle-hovered:#333333;--cui-fg-subtle-pressed:#1a1a1a;--cui-fg-subtle-disabled:rgba(102, 102, 102, 0.4);--cui-fg-placeholder:#999999;--cui-fg-placeholder-hovered:#999999;--cui-fg-placeholder-pressed:#999999;--cui-fg-placeholder-disabled:rgba(153, 153, 153, 0.4);--cui-fg-on-strong:#ffffff;--cui-fg-on-strong-hovered:#ffffff;--cui-fg-on-strong-pressed:#ffffff;--cui-fg-on-strong-disabled:rgba(255, 255, 255, 0.4);--cui-fg-accent:#3064e3;--cui-fg-accent-hovered:#1c51d3;--cui-fg-accent-pressed:#10399e;--cui-fg-accent-disabled:rgba(48, 100, 227, 0.4);--cui-fg-success:#018850;--cui-fg-success-hovered:#007a4e;--cui-fg-success-pressed:#016c26;--cui-fg-success-disabled:rgba(1, 135, 48, 0.4);--cui-fg-warning:#e27900;--cui-fg-warning-hovered:#cc6d00;--cui-fg-warning-pressed:#b25c00;--cui-fg-warning-disabled:rgba(232, 124, 0, 0.4);--cui-fg-danger:#de331d;--cui-fg-danger-hovered:#bd2c19;--cui-fg-danger-pressed:#9e2415;--cui-fg-danger-disabled:rgba(222, 51, 29, 0.4);--cui-fg-promo:#9e33e0;--cui-fg-promo-hovered:#8a1ecc;--cui-fg-promo-pressed:#7219a9;--cui-fg-promo-disabled:rgba(149, 53, 208, 0.4);--cui-border-normal:#cccccc;--cui-border-normal-hovered:#999999;--cui-border-normal-pressed:#666666;--cui-border-normal-disabled:rgba(204, 204, 204, 0.4);--cui-border-subtle:#e6e6e6;--cui-border-subtle-hovered:#cccccc;--cui-border-subtle-pressed:#999999;--cui-border-subtle-disabled:rgba(230, 230, 230, 0.4);--cui-border-divider:#cccccc;--cui-border-divider-hovered:#999999;--cui-border-divider-pressed:#666666;--cui-border-divider-disabled:rgba(204, 204, 204, 0.4);--cui-border-strong:#1a1a1a;--cui-border-strong-hovered:#000000;--cui-border-strong-pressed:#000000;--cui-border-strong-disabled:rgba(0, 0, 0, 0.4);--cui-border-accent:#3064e3;--cui-border-accent-hovered:#1c51d3;--cui-border-accent-pressed:#10399e;--cui-border-accent-disabled:rgba(48, 100, 227, 0.4);--cui-border-success:#018850;--cui-border-success-hovered:#007a4e;--cui-border-success-pressed:#016c26;--cui-border-success-disabled:rgba(1, 135, 48, 0.4);--cui-border-warning:#e87c00;--cui-border-warning-hovered:#cc6d00;--cui-border-warning-pressed:#b25c00;--cui-border-warning-disabled:rgba(232, 124, 0, 0.4);--cui-border-danger:#de331d;--cui-border-danger-hovered:#bd2c19;--cui-border-danger-pressed:#9e2415;--cui-border-danger-disabled:rgba(222, 51, 29, 0.4);--cui-border-promo:#9e33e0;--cui-border-promo-hovered:#8a1ecc;--cui-border-promo-pressed:#7219a9;--cui-border-promo-disabled:rgba(149, 53, 208, 0.4);--cui-bg-overlay:rgba(0, 0, 0, 0.4);--cui-bg-elevated:#ffffff;--cui-border-focus:#ebf4ff;}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;overflow-x:hidden;[type='button']{appearance:none;}}body{background-color:var(--cui-bg-normal);color:var(--cui-fg-normal);font-size:1rem;line-height:1.5rem;;label:typography;;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;};label:createBaseStyles;"`;
+exports[`BaseStylesService > should return the global base styles 1`] = `


Agreed! But it also means that tests become a bit less similar to production, if the babel plugin is still applied in bundling (which I assume it is)

packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx

connor-baer · 2023-04-24T09:51:33Z

(would have been great to open an RFC issue first, IMO):

Yes, apologies, I got a little carried away 🙈

any current or future downside of using this without Vite as our bundler?

If we were to e.g. switch bundling from TSC to rollup or even vite itself, how would it look?

for example: this effectively means components are bundled with vite in tests, and with tsc in prod, right? This would mean that tests are less reliable because less similar to what users get. It seems that the reason vitest was created is exactly that jest didn't have great support for bundling with vite.

I'm not aware of any downsides as this doesn't change the status quo. Jest used Babel to transpile the components which also didn't match how we bundle the components for production (TypeScript).

I don't see any benefit in using Vite to bundle the components for production. AFAIK, it's optimized for apps, not libraries. I plan to test Vite as a replacement for Webpack in Storybook though to reduce the number of dependencies.

"compatible with the Jest API" 👉 by design, or as a helper for people who migrate? Should we be writing tests in a different way moving forward?

By design. We can keep writing tests the same way as before. Here's a list of differences between Jest and Vitest.

robinmetral

Thanks a lot for the extra rationale here!

Jest used Babel to transpile the components which also didn't match how we bundle the components for production (TypeScript).

My bad, I thought that we were using a tsc output in Jest as well! Makes total sense then 👍 Wonder if we should try to harmonize this in the future.

I don't see any benefit in using Vite to bundle the components for production. AFAIK, it's optimized for apps, not libraries.

That was also my impression but looking at their docs for this (hadn't looked for months), it seems that they have a library mode that we could look into. But right now I think our tsc output is pretty good TBH (if there's no need to add yet another layer to our build process, let's not!)

[The jest and vitest APIs are compatible] By design.

Great! Thanks for sharing docs 🙏

https://www.npmjs.com/package/vitest-codemod

They don't play well with user-event and Vite

github-actions bot added 🗂 design-tokens 🗂 eslint-plugin-circuit-ui 🗂 circuit-ui labels Apr 23, 2023

vercel bot had a problem deploying to Preview April 23, 2023 15:02 Failure

vercel bot deployed to Preview April 23, 2023 17:20 View deployment

vercel bot deployed to Preview April 23, 2023 17:27 View deployment

connor-baer changed the title ~~Install and configure vitest~~ Replace Jest with Vitest Apr 23, 2023

vercel bot deployed to Preview April 24, 2023 06:55 View deployment

github-actions bot added the 🗂 cna-template label Apr 24, 2023

vercel bot deployed to Preview April 24, 2023 07:20 View deployment

connor-baer commented Apr 24, 2023

View reviewed changes

connor-baer force-pushed the chore/vitest branch from 0336e8b to 787333e Compare April 24, 2023 07:39

vercel bot deployed to Preview April 24, 2023 07:41 View deployment

connor-baer marked this pull request as ready for review April 24, 2023 07:48

connor-baer requested a review from a team as a code owner April 24, 2023 07:48

connor-baer requested review from robinmetral and removed request for a team April 24, 2023 07:48

vercel bot deployed to Preview April 24, 2023 08:39 View deployment

robinmetral reviewed Apr 24, 2023

View reviewed changes

packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx Outdated Show resolved Hide resolved

connor-baer requested a review from robinmetral April 24, 2023 09:58

vercel bot deployed to Preview April 24, 2023 09:59 View deployment

vercel bot deployed to Preview April 24, 2023 11:43 View deployment

robinmetral approved these changes Apr 24, 2023

View reviewed changes

connor-baer mentioned this pull request Apr 24, 2023

Backport two minor fixes to v6 #2059

Merged

5 tasks

connor-baer added the 🛠️ tech Changes to the tech stack or infrastructure label Apr 24, 2023

connor-baer added 8 commits April 24, 2023 15:16

Install and configure vitest

78ba35b

Run vitest codemod

14c3a60

https://www.npmjs.com/package/vitest-codemod

Rename files that contain JSX

9d6a747

Run vitest codemod on JS files

33de3aa

https://www.npmjs.com/package/vitest-codemod

Remove fake timers

296eeb4

They don't play well with user-event and Vite

Include jsx files in Storybook glob

7345dcb

Remove Jest

93fbcac

Add missing test util imports

8fe0306

connor-baer force-pushed the chore/vitest branch from 8134d02 to 17475d2 Compare April 24, 2023 13:20

connor-baer added 5 commits April 24, 2023 15:20

Remove obsolete snapshots

d9d67c7

Revert SidePanelContext snapshots

120b5ff

Fix Modal test

3e71b06

Explain the need for ariaHideApp in tests

26d98fc

Work around timer issues

17475d2

connor-baer enabled auto-merge (squash) April 24, 2023 13:21

vercel bot deployed to Preview April 24, 2023 13:22 View deployment

connor-baer merged commit b78270d into next Apr 24, 2023

connor-baer deleted the chore/vitest branch April 24, 2023 13:30

connor-baer mentioned this pull request Apr 27, 2023

Migrate packages to ESM #2061

Merged

5 tasks

connor-baer mentioned this pull request Jun 16, 2023

Replace Emotion.js with CSS Modules #2153

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace Jest with Vitest #2053

Replace Jest with Vitest #2053

connor-baer commented Apr 23, 2023 •

edited

Loading

changeset-bot bot commented Apr 23, 2023 •

edited

Loading

vercel bot commented Apr 23, 2023 •

edited

Loading

codecov bot commented Apr 23, 2023 •

edited

Loading

connor-baer Apr 24, 2023

robinmetral Apr 24, 2023

connor-baer Apr 24, 2023

robinmetral Apr 24, 2023 •

edited

Loading

connor-baer Apr 24, 2023 •

edited

Loading

robinmetral left a comment

robinmetral Apr 24, 2023

connor-baer commented Apr 24, 2023 •

edited

Loading

robinmetral left a comment •

edited

Loading


		exports[`BaseStylesService should return the global base styles 1`] = `"@font-face{font-family:'aktiv-grotesk';font-weight:400;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');}@font-face{font-family:'aktiv-grotesk';font-weight:700;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');}:root{--cui-bg-normal:#ffffff;--cui-bg-normal-hovered:#f5f5f5;--cui-bg-normal-pressed:#e6e6e6;--cui-bg-normal-disabled:rgba(255, 255, 255, 0.4);--cui-bg-subtle:#f5f5f5;--cui-bg-subtle-hovered:#e6e6e6;--cui-bg-subtle-pressed:#cccccc;--cui-bg-subtle-disabled:rgba(245, 245, 245, 0.4);--cui-bg-highlight:#e6e6e6;--cui-bg-highlight-hovered:#cccccc;--cui-bg-highlight-pressed:#999999;--cui-bg-highlight-disabled:rgba(230, 230, 230, 0.4);--cui-bg-strong:#000000;--cui-bg-strong-hovered:#000000;--cui-bg-strong-pressed:#000000;--cui-bg-strong-disabled:rgba(0, 0, 0, 0.4);--cui-bg-accent:#ebf4ff;--cui-bg-accent-hovered:#dbe9ff;--cui-bg-accent-pressed:#c7dbff;--cui-bg-accent-disabled:rgba(235, 244, 255, 0.4);--cui-bg-accent-strong:#3064e3;--cui-bg-accent-strong-hovered:#1c51d3;--cui-bg-accent-strong-pressed:#10399e;--cui-bg-accent-strong-disabled:rgba(48, 100, 227, 0.4);--cui-bg-success:#e9fbe9;--cui-bg-success-hovered:#d7f8d7;--cui-bg-success-pressed:#c1e8c1;--cui-bg-success-disabled:rgba(193, 232, 193, 0.4);--cui-bg-success-strong:#018850;--cui-bg-success-strong-hovered:#007a4e;--cui-bg-success-strong-pressed:#016c26;--cui-bg-success-strong-disabled:rgba(1, 135, 48, 0.4);--cui-bg-warning:#fdf4db;--cui-bg-warning-hovered:#faeec6;--cui-bg-warning-pressed:#f5dea3;--cui-bg-warning-disabled:rgba(245, 222, 163, 0.4);--cui-bg-warning-strong:#e87c00;--cui-bg-warning-strong-hovered:#cc6d00;--cui-bg-warning-strong-pressed:#b25c00;--cui-bg-warning-strong-disabled:rgba(232, 124, 0, 0.4);--cui-bg-danger:#fbe9e7;--cui-bg-danger-hovered:#fcddd9;--cui-bg-danger-pressed:#f7ccc7;--cui-bg-danger-disabled:rgba(247, 204, 199, 0.4);--cui-bg-danger-strong:#de331d;--cui-bg-danger-strong-hovered:#bd2c19;--cui-bg-danger-strong-pressed:#9e2415;--cui-bg-danger-strong-disabled:rgba(222, 51, 29, 0.4);--cui-bg-promo:#f5edfe;--cui-bg-promo-hovered:#ede0fc;--cui-bg-promo-pressed:#e0c9f8;--cui-bg-promo-disabled:rgba(224, 201, 248, 0.4);--cui-bg-promo-strong:#9e33e0;--cui-bg-promo-strong-hovered:#8a1ecc;--cui-bg-promo-strong-pressed:#7219a9;--cui-bg-promo-strong-disabled:rgba(149, 53, 208, 0.4);--cui-fg-normal:#1a1a1a;--cui-fg-normal-hovered:#1a1a1a;--cui-fg-normal-pressed:#1a1a1a;--cui-fg-normal-disabled:rgba(26, 26, 26, 0.4);--cui-fg-subtle:#666666;--cui-fg-subtle-hovered:#333333;--cui-fg-subtle-pressed:#1a1a1a;--cui-fg-subtle-disabled:rgba(102, 102, 102, 0.4);--cui-fg-placeholder:#999999;--cui-fg-placeholder-hovered:#999999;--cui-fg-placeholder-pressed:#999999;--cui-fg-placeholder-disabled:rgba(153, 153, 153, 0.4);--cui-fg-on-strong:#ffffff;--cui-fg-on-strong-hovered:#ffffff;--cui-fg-on-strong-pressed:#ffffff;--cui-fg-on-strong-disabled:rgba(255, 255, 255, 0.4);--cui-fg-accent:#3064e3;--cui-fg-accent-hovered:#1c51d3;--cui-fg-accent-pressed:#10399e;--cui-fg-accent-disabled:rgba(48, 100, 227, 0.4);--cui-fg-success:#018850;--cui-fg-success-hovered:#007a4e;--cui-fg-success-pressed:#016c26;--cui-fg-success-disabled:rgba(1, 135, 48, 0.4);--cui-fg-warning:#e27900;--cui-fg-warning-hovered:#cc6d00;--cui-fg-warning-pressed:#b25c00;--cui-fg-warning-disabled:rgba(232, 124, 0, 0.4);--cui-fg-danger:#de331d;--cui-fg-danger-hovered:#bd2c19;--cui-fg-danger-pressed:#9e2415;--cui-fg-danger-disabled:rgba(222, 51, 29, 0.4);--cui-fg-promo:#9e33e0;--cui-fg-promo-hovered:#8a1ecc;--cui-fg-promo-pressed:#7219a9;--cui-fg-promo-disabled:rgba(149, 53, 208, 0.4);--cui-border-normal:#cccccc;--cui-border-normal-hovered:#999999;--cui-border-normal-pressed:#666666;--cui-border-normal-disabled:rgba(204, 204, 204, 0.4);--cui-border-subtle:#e6e6e6;--cui-border-subtle-hovered:#cccccc;--cui-border-subtle-pressed:#999999;--cui-border-subtle-disabled:rgba(230, 230, 230, 0.4);--cui-border-divider:#cccccc;--cui-border-divider-hovered:#999999;--cui-border-divider-pressed:#666666;--cui-border-divider-disabled:rgba(204, 204, 204, 0.4);--cui-border-strong:#1a1a1a;--cui-border-strong-hovered:#000000;--cui-border-strong-pressed:#000000;--cui-border-strong-disabled:rgba(0, 0, 0, 0.4);--cui-border-accent:#3064e3;--cui-border-accent-hovered:#1c51d3;--cui-border-accent-pressed:#10399e;--cui-border-accent-disabled:rgba(48, 100, 227, 0.4);--cui-border-success:#018850;--cui-border-success-hovered:#007a4e;--cui-border-success-pressed:#016c26;--cui-border-success-disabled:rgba(1, 135, 48, 0.4);--cui-border-warning:#e87c00;--cui-border-warning-hovered:#cc6d00;--cui-border-warning-pressed:#b25c00;--cui-border-warning-disabled:rgba(232, 124, 0, 0.4);--cui-border-danger:#de331d;--cui-border-danger-hovered:#bd2c19;--cui-border-danger-pressed:#9e2415;--cui-border-danger-disabled:rgba(222, 51, 29, 0.4);--cui-border-promo:#9e33e0;--cui-border-promo-hovered:#8a1ecc;--cui-border-promo-pressed:#7219a9;--cui-border-promo-disabled:rgba(149, 53, 208, 0.4);--cui-bg-overlay:rgba(0, 0, 0, 0.4);--cui-bg-elevated:#ffffff;--cui-border-focus:#ebf4ff;}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;},::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;overflow-x:hidden;[type='button']{appearance:none;}}body{background-color:var(--cui-bg-normal);color:var(--cui-fg-normal);font-size:1rem;line-height:1.5rem;;label:typography;;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;};label:createBaseStyles;"`;
		exports[`BaseStylesService > should return the global base styles 1`] = `

Replace Jest with Vitest #2053

Replace Jest with Vitest #2053

Conversation

connor-baer commented Apr 23, 2023 • edited Loading

Purpose

Approach and changes

Definition of done

changeset-bot bot commented Apr 23, 2023 • edited Loading

⚠️ No Changeset found

vercel bot commented Apr 23, 2023 • edited Loading

codecov bot commented Apr 23, 2023 • edited Loading

Codecov Report

connor-baer Apr 24, 2023

Choose a reason for hiding this comment

robinmetral Apr 24, 2023

Choose a reason for hiding this comment

connor-baer Apr 24, 2023

Choose a reason for hiding this comment

robinmetral Apr 24, 2023 • edited Loading

Choose a reason for hiding this comment

connor-baer Apr 24, 2023 • edited Loading

Choose a reason for hiding this comment

robinmetral left a comment

Choose a reason for hiding this comment

Footnotes

robinmetral Apr 24, 2023

Choose a reason for hiding this comment

connor-baer commented Apr 24, 2023 • edited Loading

robinmetral left a comment • edited Loading

Choose a reason for hiding this comment

connor-baer commented Apr 23, 2023 •

edited

Loading

changeset-bot bot commented Apr 23, 2023 •

edited

Loading

vercel bot commented Apr 23, 2023 •

edited

Loading

codecov bot commented Apr 23, 2023 •

edited

Loading

robinmetral Apr 24, 2023 •

edited

Loading

connor-baer Apr 24, 2023 •

edited

Loading

connor-baer commented Apr 24, 2023 •

edited

Loading

robinmetral left a comment •

edited

Loading