[zero][system] Add vitest and jest test runners

in vite app

apps/zero-runtime-vite-app/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-typescript"
+  ]
+}

apps/zero-runtime-vite-app/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

apps/zero-runtime-vite-app/README.md

@@ -24,3 +24,10 @@ After building, you can run the project by changing into the directory and then
 3. Build the code using `yarn build`
 
 Optionally, before running the dev server, you can run `yarn vite optimize --force` if it logged some error during `yarn vite`.
+
+### Testing
+
+This demo app has been configured to run tests using both vitest or jest.
+
+1. Vitest - You can run `yarn test` to run the tests using vitest
+2. Jest - You can run `yarn jest` to run the tests using jest

apps/zero-runtime-vite-app/jest.config.js

@@ -0,0 +1,29 @@
+// Mandatory to map so that the imports translate to cjs files
+// eslint-disable-next-line import/no-unresolved
+const { createTheme } = require('@mui/material/node/styles');
+
+const theme = createTheme();
+// @TODO - Make this part of the main package
+// @ts-ignore
+theme.applyDarkStyles = function applyDarkStyles(obj) {
+  return {
+    // @TODO - Use custom stylis plugin as in docs/src/createEmotionCache.ts
+    // so that we don't need to use *
+    '* :where([data-mui-color-scheme="dark"]) &': obj,
+  };
+};
+
+/**
+ * @type {import('jest').Config}
+ */
+module.exports = {
+  transform: {
+    '\\.[jt]sx?': ['@mui/zero-jest', { theme }],
+  },
+  // Mandatory to map so that the imports translate to cjs files
+  moduleNameMapper: {
+    '^@mui/material(.*)$': '@mui/material/node/$1',
+  },
+  verbose: true,
+  testEnvironment: 'jsdom',
+};

apps/zero-runtime-vite-app/package.json

@@ -2,22 +2,32 @@
   "name": "@app/zero-runtime-vite-app",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest"
   },
   "dependencies": {
     "@mui/zero-runtime": "file:../../packages/zero-runtime/build",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@mui/utils": "file:../../packages/mui-utils/build",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
     "@mui/material": "file:../../packages/mui-material/build",
+    "@mui/utils": "file:../../packages/mui-utils/build",
+    "@mui/zero-jest": "file:../../packages/zero-jest/build",
     "@mui/zero-vite-plugin": "file:../../packages/zero-vite-plugin/build",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "@vitejs/plugin-react": "^4.0.4",
-    "vite": "4.4.9"
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^22.1.0",
+    "vite": "4.4.9",
+    "vitest": "^0.34.4"
   },
   "resolutions": {
     "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build"

apps/zero-runtime-vite-app/src/Slider/ZeroSlider.test.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/jsx-filename-extension */
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import Slider from './ZeroSlider';
+
+describe('Slider', () => {
+  it('should render', () => {
+    const { rerender, container } = render(<Slider />);
+    // this takes care of checking the generated CSS
+    expect(document.querySelector('style').textContent).toMatchSnapshot();
+
+    const root = container.getElementsByClassName('MuiSlider-root')[0];
+    expect(root.classList.contains('MuiSlider-colorPrimary')).toBeTruthy();
+    rerender(<Slider color="secondary" />);
+    expect(root.classList.contains('MuiSlider-colorSecondary')).toBeTruthy();
+
+    let rootComputedStyles = window.getComputedStyle(root);
+    expect(rootComputedStyles.borderRadius).toEqual('12px');
+    expect(rootComputedStyles.cursor).toEqual('pointer');
+
+    rerender(<Slider disabled />);
+    rootComputedStyles = window.getComputedStyle(root);
+    expect(rootComputedStyles.cursor).toEqual('default');
+  });
+});

apps/zero-runtime-vite-app/src/Slider/__snapshots__/ZeroSlider.test.jsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider should render 1`] = `
+".s3plgub{border-radius:12px;box-sizing:content-box;display:inline-block;position:relative;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;}@media print{.s3plgub{print-color-adjust:exact;}}.s3plgub.Mui-disabled{pointer-events:none;cursor:default;color:#bdbdbd;}.s3plgub.MuiSlider-dragging .MuiSlider-thumb,.s3plgub.MuiSlider-dragging .MuiSlider-track{-webkit-transition:none;transition:none;}
+.s3plgub-1{color:#1976d2;}
+.s3plgub-2{color:#9c27b0;}
+.s3plgub-3{height:4px;width:100%;padding:13px 0;}@media (pointer:coarse){.s3plgub-3{padding:20px 0;}}
+.s3plgub-4{height:2px;}
+.s3plgub-5{margin-bottom:160px;}
+.s3plgub-6{height:100%;width:4px;padding:0 13px;}@media (pointer:coarse){.s3plgub-6{padding:0 20px;}}
+.s3plgub-7{width:2px;}
+.s3plgub-8{margin-right:352px;}
+.s1lr07k2{display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}
+.s1lr07k2-1{width:100%;height:inherit;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.s1lr07k2-2{height:100%;width:inherit;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
+.s1lr07k2-3{opacity:1;}
+.si9pcot{display:block;position:absolute;border-radius:inherit;border:1px solid currentColor;background-color:currentColor;-webkit-transition:left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,width 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms,height 150ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,width 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms,height 150ms cubic-bezier(0.4,0,0.2,1) 0ms;}
+.si9pcot-1{--slider-track-color:rgb(167,202,237);}* :where([data-mui-color-scheme="dark"]) .si9pcot-1{--slider-track-color:rgb(12,59,105);}
+.si9pcot-2{--slider-track-color:rgb(217,172,224);}* :where([data-mui-color-scheme="dark"]) .si9pcot-2{--slider-track-color:rgb(78,19,88);}
+.si9pcot-3{border:none;}
+.si9pcot-4{height:inherit;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.si9pcot-5{width:inherit;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
+.si9pcot-6{display:none;}
+
+
+.s1xp8ut9{position:absolute;width:20px;height:20px;box-sizing:border-box;border-radius:50%;outline:0;background-color:currentColor;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0ms,left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0ms,left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms;}.s1xp8ut9:before{position:absolute;content:"";border-radius:inherit;width:100%;height:100%;box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);}.s1xp8ut9::after{position:absolute;content:"";border-radius:50%;width:42px;height:42px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}.s1xp8ut9:hover,.s1xp8ut9.Mui-focusVisible{box-shadow:0px 0px 0px 8px var(--slider-thumb-shadow-color);}@media (hover:none){.s1xp8ut9:hover,.s1xp8ut9.Mui-focusVisible{box-shadow:none;}}.s1xp8ut9.Mui-active{box-shadow:0px 0px 0px 14px var(--slider-thumb-shadow-color);}.s1xp8ut9.Mui-disabled:hover{box-shadow:none;}
+.s1xp8ut9-1{--slider-thumb-shadow-color:rgba(25,118,210,0.16);}
+.s1xp8ut9-2{--slider-thumb-shadow-color:rgba(156,39,176,0.16);}
+.s1xp8ut9-3{width:12px;height:12px;}.s1xp8ut9-3:before{box-shadow:none;}
+.s1xp8ut9-4{top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
+.s1xp8ut9-5{left:50%;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%);}
+.s149nfof{z-index:1;white-space:nowrap;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:500;font-size:0.875rem;line-height:1.43;-webkit-letter-spacing:0.01071em;-moz-letter-spacing:0.01071em;-ms-letter-spacing:0.01071em;letter-spacing:0.01071em;-webkit-transition:-webkit-transform 150ms cubic-bezier(0.4,0,0.2,1) 0ms;-webkit-transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0ms;position:absolute;background-color:#757575;border-radius:2px;color:#fff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0.25rem 0.75rem;}
+.s149nfof-1{font-size:0.75rem;padding:0.25rem 0.5rem;}
+.s149nfof-2{top:-10px;-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;-webkit-transform:translateY(-100%) scale(0);-ms-transform:translateY(-100%) scale(0);transform:translateY(-100%) scale(0);}.s149nfof-2:before{position:absolute;content:"";width:8px;height:8px;-webkit-transform:translate(-50%,50%) rotate(45deg);-ms-transform:translate(-50%,50%) rotate(45deg);transform:translate(-50%,50%) rotate(45deg);background-color:inherit;bottom:0;left:50%;}.s149nfof-2.MuiSlider-valueLabelOpen{-webkit-transform:translateY(-100%) scale(1);-ms-transform:translateY(-100%) scale(1);transform:translateY(-100%) scale(1);}
+.s149nfof-3{top:50%;right:30px;-webkit-transform:translateY(-50%) scale(0);-ms-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;}.s149nfof-3:before{position:absolute;content:"";width:8px;height:8px;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);background-color:inherit;right:-8px;top:50%;}.s149nfof-3.MuiSlider-valueLabelOpen{-webkit-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);}
+.s149nfof-4{right:20px;}
+.s1ndlezr{position:absolute;width:2px;height:2px;border-radius:4px;background-color:currentColor;}
+.s1ndlezr-1{top:50%;-webkit-transform:translate(-1px,-50%);-ms-transform:translate(-1px,-50%);transform:translate(-1px,-50%);}
+.s1ndlezr-2{left:50%;-webkit-transform:translate(-50%,1px);-ms-transform:translate(-50%,1px);transform:translate(-50%,1px);}
+.s1ndlezr-3{background-color:#fff;opacity:0.8;}
+.s8oem3l{font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;font-size:0.875rem;line-height:1.43;-webkit-letter-spacing:0.01071em;-moz-letter-spacing:0.01071em;-ms-letter-spacing:0.01071em;letter-spacing:0.01071em;color:rgba(0,0,0,0.6);position:absolute;white-space:nowrap;}
+.s8oem3l-1{top:30px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}@media (pointer:coarse){.s8oem3l-1{top:40px;}}
+.s8oem3l-2{left:36px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}@media (pointer:coarse){.s8oem3l-2{left:44px;}}
+.s8oem3l-3{color:rgba(0,0,0,0.87);}
+"
+`;

apps/zero-runtime-vite-app/src/Slider/__vite_snapshots__/ZeroSlider.test.jsx.snap

@@ -0,0 +1,46 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Slider > should render 1`] = `
+".s3plgub{border-radius:12px;box-sizing:content-box;display:inline-block;position:relative;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;}@media print{.s3plgub{print-color-adjust:exact;}}.s3plgub.Mui-disabled{pointer-events:none;cursor:default;color:#bdbdbd;}.s3plgub.MuiSlider-dragging .MuiSlider-thumb,.s3plgub.MuiSlider-dragging .MuiSlider-track{-webkit-transition:none;transition:none;}
+.s3plgub-1{color:#1976d2;}
+.s3plgub-2{color:#9c27b0;}
+.s3plgub-3{height:4px;width:100%;padding:13px 0;}@media (pointer:coarse){.s3plgub-3{padding:20px 0;}}
+.s3plgub-4{height:2px;}
+.s3plgub-5{margin-bottom:160px;}
+.s3plgub-6{height:100%;width:4px;padding:0 13px;}@media (pointer:coarse){.s3plgub-6{padding:0 20px;}}
+.s3plgub-7{width:2px;}
+.s3plgub-8{margin-right:352px;}
+.s1lr07k2{display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}
+.s1lr07k2-1{width:100%;height:inherit;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.s1lr07k2-2{height:100%;width:inherit;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
+.s1lr07k2-3{opacity:1;}
+.si9pcot{display:block;position:absolute;border-radius:inherit;border:1px solid currentColor;background-color:currentColor;-webkit-transition:left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,width 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms,height 150ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,width 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms,height 150ms cubic-bezier(0.4,0,0.2,1) 0ms;}
+.si9pcot-1{--slider-track-color:rgb(167,202,237);}* :where([data-mui-color-scheme=\\"dark\\"]) .si9pcot-1{--slider-track-color:rgb(12,59,105);}
+.si9pcot-2{--slider-track-color:rgb(217,172,224);}* :where([data-mui-color-scheme=\\"dark\\"]) .si9pcot-2{--slider-track-color:rgb(78,19,88);}
+.si9pcot-3{border:none;}
+.si9pcot-4{height:inherit;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.si9pcot-5{width:inherit;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
+.si9pcot-6{display:none;}
+
+
+.s1xp8ut9{position:absolute;width:20px;height:20px;box-sizing:border-box;border-radius:50%;outline:0;background-color:currentColor;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0ms,left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0ms,left 150ms cubic-bezier(0.4,0,0.2,1) 0ms,bottom 150ms cubic-bezier(0.4,0,0.2,1) 0ms;}.s1xp8ut9:before{position:absolute;content:\\"\\";border-radius:inherit;width:100%;height:100%;box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);}.s1xp8ut9::after{position:absolute;content:\\"\\";border-radius:50%;width:42px;height:42px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}.s1xp8ut9:hover,.s1xp8ut9.Mui-focusVisible{box-shadow:0px 0px 0px 8px var(--slider-thumb-shadow-color);}@media (hover:none){.s1xp8ut9:hover,.s1xp8ut9.Mui-focusVisible{box-shadow:none;}}.s1xp8ut9.Mui-active{box-shadow:0px 0px 0px 14px var(--slider-thumb-shadow-color);}.s1xp8ut9.Mui-disabled:hover{box-shadow:none;}
+.s1xp8ut9-1{--slider-thumb-shadow-color:rgba(25,118,210,0.16);}
+.s1xp8ut9-2{--slider-thumb-shadow-color:rgba(156,39,176,0.16);}
+.s1xp8ut9-3{width:12px;height:12px;}.s1xp8ut9-3:before{box-shadow:none;}
+.s1xp8ut9-4{top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
+.s1xp8ut9-5{left:50%;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%);}
+.s149nfof{z-index:1;white-space:nowrap;font-family:\\"Roboto\\",\\"Helvetica\\",\\"Arial\\",sans-serif;font-weight:500;font-size:0.875rem;line-height:1.43;-webkit-letter-spacing:0.01071em;-moz-letter-spacing:0.01071em;-ms-letter-spacing:0.01071em;letter-spacing:0.01071em;-webkit-transition:-webkit-transform 150ms cubic-bezier(0.4,0,0.2,1) 0ms;-webkit-transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0ms;position:absolute;background-color:#757575;border-radius:2px;color:#fff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0.25rem 0.75rem;}
+.s149nfof-1{font-size:0.75rem;padding:0.25rem 0.5rem;}
+.s149nfof-2{top:-10px;-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center;-webkit-transform:translateY(-100%) scale(0);-ms-transform:translateY(-100%) scale(0);transform:translateY(-100%) scale(0);}.s149nfof-2:before{position:absolute;content:\\"\\";width:8px;height:8px;-webkit-transform:translate(-50%,50%) rotate(45deg);-ms-transform:translate(-50%,50%) rotate(45deg);transform:translate(-50%,50%) rotate(45deg);background-color:inherit;bottom:0;left:50%;}.s149nfof-2.MuiSlider-valueLabelOpen{-webkit-transform:translateY(-100%) scale(1);-ms-transform:translateY(-100%) scale(1);transform:translateY(-100%) scale(1);}
+.s149nfof-3{top:50%;right:30px;-webkit-transform:translateY(-50%) scale(0);-ms-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;}.s149nfof-3:before{position:absolute;content:\\"\\";width:8px;height:8px;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);background-color:inherit;right:-8px;top:50%;}.s149nfof-3.MuiSlider-valueLabelOpen{-webkit-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);}
+.s149nfof-4{right:20px;}
+.s1ndlezr{position:absolute;width:2px;height:2px;border-radius:4px;background-color:currentColor;}
+.s1ndlezr-1{top:50%;-webkit-transform:translate(-1px,-50%);-ms-transform:translate(-1px,-50%);transform:translate(-1px,-50%);}
+.s1ndlezr-2{left:50%;-webkit-transform:translate(-50%,1px);-ms-transform:translate(-50%,1px);transform:translate(-50%,1px);}
+.s1ndlezr-3{background-color:#fff;opacity:0.8;}
+.s8oem3l{font-family:\\"Roboto\\",\\"Helvetica\\",\\"Arial\\",sans-serif;font-weight:400;font-size:0.875rem;line-height:1.43;-webkit-letter-spacing:0.01071em;-moz-letter-spacing:0.01071em;-ms-letter-spacing:0.01071em;letter-spacing:0.01071em;color:rgba(0,0,0,0.6);position:absolute;white-space:nowrap;}
+.s8oem3l-1{top:30px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}@media (pointer:coarse){.s8oem3l-1{top:40px;}}
+.s8oem3l-2{left:36px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}@media (pointer:coarse){.s8oem3l-2{left:44px;}}
+.s8oem3l-3{color:rgba(0,0,0,0.87);}
+"
+`;

apps/zero-runtime-vite-app/tsconfig.json

@@ -11,7 +11,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "types": ["react"],
+    "types": ["react", "vitest/globals"],
     "incremental": true
   },
   "exclude": ["node_modules"],

apps/zero-runtime-vite-app/vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+import { join, dirname, basename } from 'node:path';
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import { zeroVitePlugin } from '@mui/zero-vite-plugin';
@@ -25,4 +27,19 @@ export default defineConfig({
     reactPlugin(),
     splitVendorChunkPlugin(),
   ],
+  test: {
+    globals: true,
+    watch: false,
+    environment: 'jsdom',
+    resolveSnapshotPath(testPath, extension) {
+      return join(
+        join(dirname(testPath), '__vite_snapshots__'),
+        `${basename(testPath)}${extension}`,
+      );
+    },
+    passWithNoTests: true,
+    css: {
+      include: [/.+/],
+    },
+  },
 });