chore: migrate core, react, shadow-dom, update-shorthands to vitest

.eslintrc.json

@@ -76,11 +76,18 @@
         "**/*.test.tsx",
         "**/jest.setup.js",
         "**/jest.setup.ts",
+        "**/vitest.config.ts",
         "**/.storybook/main.js"
       ],
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }
+    },
+    {
+      "files": ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
+      "rules": {
+        "import/first": "off"
+      }
     }
   ]
 }

change/@griffel-core-522b920c-19cc-4125-9bef-148711b94193.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from Jest to Vitest",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-react-7249445b-eb0e-4606-9d4c-c4e5e4820994.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from Jest to Vitest",
+  "packageName": "@griffel/react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@griffel-shadow-dom-3e6e015b-dd4e-4e36-8558-e656c1d1e665.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: migrate from Jest to Vitest",
+  "packageName": "@griffel/shadow-dom",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/core/project.json

@@ -40,10 +40,10 @@
       "outputs": ["{options.outputFile}"]
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/packages/core"],
+      "executor": "@nx/vitest:test",
+      "outputs": ["{options.reportsDirectory}"],
       "options": {
-        "jestConfig": "packages/core/jest.config.ts"
+        "reportsDirectory": "../../coverage/packages/core"
       }
     },
     "bundle-size": {

packages/core/src/common/snapshotSerializers.ts

@@ -1,5 +1,4 @@
-/// <reference types="jest" />
-
+import type { SnapshotSerializer } from 'vitest';
 import * as prettier from 'prettier';
 
 import { DATA_BUCKET_ATTR } from '../constants';
@@ -11,7 +10,7 @@ import type { resolveResetStyleRules } from '../runtime/resolveResetStyleRules';
 // eslint-disable-next-line eqeqeq
 const isObject = (value: unknown) => value != null && !Array.isArray(value) && typeof value === 'object';
 
-export const griffelRendererSerializer: jest.SnapshotSerializerPlugin = {
+export const griffelRendererSerializer: SnapshotSerializer = {
   test(value) {
     return isObject(value) && isObject(value.stylesheets);
   },
@@ -53,7 +52,7 @@ export const griffelRendererSerializer: jest.SnapshotSerializerPlugin = {
 type StyleRulesTuple = ReturnType<typeof resolveStyleRules>;
 const isStyleRulesTuple = (value: unknown): value is StyleRulesTuple => Array.isArray(value) && value.length === 2;
 
-export const griffelRulesSerializer: jest.SnapshotSerializerPlugin = {
+export const griffelRulesSerializer: SnapshotSerializer = {
   test(value) {
     return isStyleRulesTuple(value);
   },
@@ -74,7 +73,7 @@ export const griffelRulesSerializer: jest.SnapshotSerializerPlugin = {
   },
 };
 
-export const griffelResetRulesSerializer: jest.SnapshotSerializerPlugin = {
+export const griffelResetRulesSerializer: SnapshotSerializer = {
   test(value) {
     return Array.isArray(value);
   },

packages/core/src/constants.test.ts

@@ -1,9 +1,10 @@
+import { it, expect, vi } from 'vitest';
 it('hosts global constants', async () => {
   const importA = await import('./constants');
 
   // We are reloading a module, so instances that are created inside a module will be different
   // https://jestjs.io/docs/jest-object#jestresetmodules
-  jest.resetModules();
+  vi.resetModules();
   const importB = await import('./constants');
 
   expect(importA.DEFINITION_LOOKUP_TABLE).toBe(importA.DEFINITION_LOOKUP_TABLE);

packages/core/src/devtools/getAtomicDebugSequenceTree.test.ts

@@ -1,11 +1,12 @@
+import { describe, it, expect, vi } from 'vitest';
 import { SEQUENCE_PREFIX } from '../constants';
 import { makeStyles } from '../makeStyles';
 import type { MakeStylesOptions } from '../makeStyles';
 import { mergeClasses } from '../mergeClasses';
 import { createDOMRenderer } from '../renderer/createDOMRenderer';
 import { getAtomicDebugSequenceTree } from './getAtomicDebugSequenceTree';
 
-jest.mock('./isDevToolsEnabled', () => ({
+vi.mock('./isDevToolsEnabled', () => ({
   isDevToolsEnabled: true,
 }));
 

packages/core/src/devtools/getResetDebugSequence.test.ts

@@ -1,11 +1,12 @@
+import { describe, it, expect, vi } from 'vitest';
 import { RESET_HASH_PREFIX } from '../constants';
 import { makeResetStyles } from '../makeResetStyles';
 import type { MakeStylesOptions } from '../makeStyles';
 import { mergeClasses } from '../mergeClasses';
 import { createDOMRenderer } from '../renderer/createDOMRenderer';
 import { getResetDebugSequence } from './getResetDebugSequence';
 
-jest.mock('./isDevToolsEnabled', () => ({
+vi.mock('./isDevToolsEnabled', () => ({
   isDevToolsEnabled: true,
 }));
 
@@ -35,7 +36,7 @@ describe('getResetDebugSequence', () => {
       slot: 'makeResetStyles()',
     });
     expect(result.rules).toMatchInlineSnapshot(`
-      Object {
+      {
         "r1l95nvm": ".r1l95nvm{margin:0;padding:0;}",
       }
     `);
@@ -59,7 +60,7 @@ describe('getResetDebugSequence', () => {
       slot: 'makeResetStyles()',
     });
     expect(result.rules).toMatchInlineSnapshot(`
-      Object {
+      {
         "rf14qlw": ".rf14qlw{margin:0;padding:0;}.rf14qlw:hover{color:blue;}.rf14qlw .foo{color:red;}",
       }
     `);

packages/core/src/devtools/injectDevTools.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import { injectDevTools } from './injectDevTools';
 
 describe('injectDevTools', () => {

packages/core/src/devtools/mergeDebugSequence.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect, vi } from 'vitest';
 import { DEFINITION_LOOKUP_TABLE, RESET_HASH_PREFIX, SEQUENCE_PREFIX } from '../constants';
 import { makeResetStyles } from '../makeResetStyles';
 import { makeStyles } from '../makeStyles';
@@ -6,7 +7,7 @@ import { createDOMRenderer } from '../renderer/createDOMRenderer';
 import { mergeDebugSequence } from './mergeDebugSequence';
 import { getDebugClassNames } from './utils';
 
-jest.mock('./isDevToolsEnabled', () => ({
+vi.mock('./isDevToolsEnabled', () => ({
   isDevToolsEnabled: true,
 }));
 

packages/core/src/devtools/store.test.ts

@@ -1,11 +1,12 @@
+import { describe, it, expect, vi } from 'vitest';
 import { SEQUENCE_PREFIX } from '../constants';
 import { makeStyles } from '../makeStyles';
 import { mergeClasses } from '../mergeClasses';
 import { createDOMRenderer } from '../renderer/createDOMRenderer';
 import type { MakeStylesOptions } from '../makeStyles';
 import { debugData } from './store';
 
-jest.mock('./isDevToolsEnabled', () => ({
+vi.mock('./isDevToolsEnabled', () => ({
   isDevToolsEnabled: true,
 }));
 

packages/core/src/devtools/utils.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import type { LookupItem } from '../types';
 import type { DebugSequence } from './types';
 import { getDebugClassNames } from './utils';

packages/core/src/insertionFactory.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect, vi } from 'vitest';
 import { insertionFactory } from './insertionFactory';
 import type { GriffelRenderer } from './types';
 
@@ -7,8 +8,8 @@ describe('insertionFactory', () => {
   });
 
   it('inserts CSS rules only once per renderer', () => {
-    const rendererA: Partial<GriffelRenderer> = { id: 'a', insertCSSRules: jest.fn() };
-    const rendererB: Partial<GriffelRenderer> = { id: 'b', insertCSSRules: jest.fn() };
+    const rendererA: Partial<GriffelRenderer> = { id: 'a', insertCSSRules: vi.fn() };
+    const rendererB: Partial<GriffelRenderer> = { id: 'b', insertCSSRules: vi.fn() };
 
     const insertStyles = insertionFactory();
 

packages/core/src/makeResetStyles.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { griffelRendererSerializer } from './common/snapshotSerializers';
 import { createDOMRenderer } from './renderer/createDOMRenderer';
 import { makeResetStyles } from './makeResetStyles';

packages/core/src/makeStaticStyles.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect, beforeEach } from 'vitest';
 import { createDOMRenderer } from './renderer/createDOMRenderer';
 import { griffelRendererSerializer } from './common/snapshotSerializers';
 import { makeStaticStyles } from './makeStaticStyles';

packages/core/src/makeStyles.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { RESET } from './constants';
 import { createDOMRenderer } from './renderer/createDOMRenderer';
 import { griffelRendererSerializer } from './common/snapshotSerializers';
@@ -226,7 +227,7 @@ describe('makeStyles', () => {
         renderer.insertCSSRules(cssRulesByBucket);
       };
     };
-    const renderer: Partial<GriffelRenderer> = { insertCSSRules: jest.fn() };
+    const renderer: Partial<GriffelRenderer> = { insertCSSRules: vi.fn() };
 
     const computeClasses = makeStyles(
       {

packages/core/src/mergeClasses.test.ts

@@ -1,3 +1,6 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import type { SnapshotSerializer } from 'vitest';
+
 import { mergeClasses } from './mergeClasses';
 import { makeStyles } from './makeStyles';
 import type { MakeStylesOptions } from './makeStyles';
@@ -15,7 +18,7 @@ function removeSequenceHash(classNames: string) {
   return (classNames.substr(0, indexOfSequence - 1) + classNames.substr(indexOfSequence + SEQUENCE_SIZE)).trim();
 }
 
-const mergeClassesSequenceHashRemoval: jest.SnapshotSerializerPlugin = {
+const mergeClassesSequenceHashRemoval: SnapshotSerializer = {
   test(value) {
     return typeof value === 'string';
   },
@@ -32,7 +35,7 @@ const options: MakeStylesOptions = {
 
 describe('mergeClasses', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('handles non makeStyles classes', () => {
@@ -115,7 +118,7 @@ describe('mergeClasses', () => {
 
   it('warns if an unregistered sequence was passed', () => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const error = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
+    const error = vi.spyOn(console, 'error').mockImplementationOnce(() => {});
     const className = makeStyles({ root: { display: 'block' } })(options).root;
 
     expect(mergeClasses(className, `${SEQUENCE_PREFIX}abcdefg_abcdefg oprsqrt`)).toMatchInlineSnapshot(
@@ -128,7 +131,7 @@ describe('mergeClasses', () => {
 
   it('warns if strings are not properly merged', () => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const error = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
+    const error = vi.spyOn(console, 'error').mockImplementationOnce(() => {});
 
     const className1 = makeStyles({ root: { display: 'block' } })(options).root;
     const className2 = makeStyles({ root: { display: 'flex' } })(options).root;
@@ -142,7 +145,7 @@ describe('mergeClasses', () => {
 
   it('warns if classes with different directions are passed', () => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const error = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
+    const error = vi.spyOn(console, 'error').mockImplementationOnce(() => {});
 
     const ltrClassName = makeStyles({ root: { display: 'block' } })(options).root;
     const rtlClassName = makeStyles({ root: { display: 'flex' } })({ ...options, dir: 'rtl' }).root;
@@ -153,7 +156,7 @@ describe('mergeClasses', () => {
 
   it('warns if contains multiple classes from makeResetStyles', () => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const error = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
+    const error = vi.spyOn(console, 'error').mockImplementationOnce(() => {});
 
     const className1 = makeResetStyles({ display: 'block' })(options);
     const className2 = makeResetStyles({ display: 'grid' })(options);
@@ -231,30 +234,24 @@ describe('mergeClasses', () => {
 });
 
 describe('merges classes and generates sequence hashes', () => {
-  it('development', () => {
-    jest.isolateModules(() => {
-      process.env.NODE_ENV = 'development';
-
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const { mergeClasses } = require('./mergeClasses');
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const { makeStyles } = require('./makeStyles');
-      const className1 = makeStyles({ root: { display: 'block' } })(options).root;
-      const className2 = makeStyles({ root: { display: 'flex' } })(options).root;
-      expect(mergeClasses(className1, className2)).toBe('___1gzszts_39qb7g0 f22iagw');
-    });
+  it('development', async () => {
+    vi.resetModules();
+    process.env.NODE_ENV = 'development';
+
+    const { mergeClasses } = await import('./mergeClasses');
+    const { makeStyles } = await import('./makeStyles');
+    const className1 = makeStyles({ root: { display: 'block' } })(options).root;
+    const className2 = makeStyles({ root: { display: 'flex' } })(options).root;
+    expect(mergeClasses(className1, className2)).toBe('___1gzszts_39qb7g0 f22iagw');
   });
   it('production', async () => {
-    jest.isolateModules(() => {
-      process.env.NODE_ENV = 'production';
-
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const { mergeClasses } = require('./mergeClasses');
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const { makeStyles } = require('./makeStyles');
-      const className1 = makeStyles({ root: { display: 'block' } })(options).root;
-      const className2 = makeStyles({ root: { display: 'flex' } })(options).root;
-      expect(mergeClasses(className1, className2)).toBe('___1gzszts f22iagw');
-    });
+    vi.resetModules();
+    process.env.NODE_ENV = 'production';
+
+    const { mergeClasses } = await import('./mergeClasses');
+    const { makeStyles } = await import('./makeStyles');
+    const className1 = makeStyles({ root: { display: 'block' } })(options).root;
+    const className2 = makeStyles({ root: { display: 'flex' } })(options).root;
+    expect(mergeClasses(className1, className2)).toBe('___1gzszts f22iagw');
   });
 });

packages/core/src/renderer/createDOMRenderer-node.test.ts

@@ -1,9 +1,10 @@
 /*
- * @jest-environment node
+ * @vitest-environment node
  */
 
 // 👆 this is intentionally to test in SSR like environment
 
+import { describe, it, expect } from 'vitest';
 import type { CSSRulesByBucket } from '../types';
 import { createDOMRenderer } from './createDOMRenderer';
 

packages/core/src/renderer/createDOMRenderer.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { griffelRendererSerializer } from '../common/snapshotSerializers';
 import type { CSSRulesByBucket } from '../types';
 import { createDOMRenderer } from './createDOMRenderer';
@@ -10,7 +11,7 @@ describe('createDOMRenderer', () => {
   });
 
   it('should apply filter for css rules for multiple buckets', () => {
-    const mediaQueryFilter = jest.fn().mockImplementation(cssRule => {
+    const mediaQueryFilter = vi.fn().mockImplementation(cssRule => {
       return !cssRule.startsWith('@media');
     });
     const renderer = createDOMRenderer(document, { unstable_filterCSSRule: mediaQueryFilter });
@@ -31,7 +32,7 @@ describe('createDOMRenderer', () => {
   });
 
   it('should apply filter for css rules within single bucket', () => {
-    const mediaQueryFilter = jest.fn().mockImplementation(cssRule => {
+    const mediaQueryFilter = vi.fn().mockImplementation(cssRule => {
       return !cssRule.startsWith('@media');
     });
     const renderer = createDOMRenderer(document, { unstable_filterCSSRule: mediaQueryFilter });