[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/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,21 @@
+/* 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 { container, rerender } = render(<Slider />);
+    expect(
+      container
+        .getElementsByClassName('MuiSlider-root')[0]
+        .classList.contains('MuiSlider-colorPrimary'),
+    ).toBeTruthy();
+    rerender(<Slider color="secondary" />);
+    expect(
+      container
+        .getElementsByClassName('MuiSlider-root')[0]
+        .classList.contains('MuiSlider-colorSecondary'),
+    ).toBeTruthy();
+  });
+});

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,4 @@
+/// <reference types="vitest" />
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import { zeroVitePlugin } from '@mui/zero-vite-plugin';
@@ -25,4 +26,9 @@ export default defineConfig({
     reactPlugin(),
     splitVendorChunkPlugin(),
   ],
+  test: {
+    globals: true,
+    watch: false,
+    environment: 'jsdom',
+  },
 });