Merge pull request #28788 from storybookjs/yann/upgrade-vitest-v2

Test: Upgrade Vitest to v2

.circleci/config.yml

@@ -238,7 +238,7 @@ jobs:
           name: Run tests
           command: |
             cd scripts
-            yarn test --coverage
+            yarn test --coverage --coverage.all=false
       - store_test_results:
           path: scripts/junit.xml
       - report-workflow-on-failure
@@ -256,7 +256,7 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage
+            yarn test --coverage --coverage.all=false
       - store_test_results:
           path: code/junit.xml
       - persist_to_workspace:

.vscode/settings.json

@@ -24,14 +24,7 @@
   "eslint.options": {
     "cache": true,
     "cacheLocation": ".cache/eslint",
-    "extensions": [
-      ".js",
-      ".jsx",
-      ".mjs",
-      ".json",
-      ".ts",
-      ".tsx"
-    ]
+    "extensions": [".js", ".jsx", ".mjs", ".json", ".ts", ".tsx"]
   },
   "eslint.useESLintClass": true,
   "eslint.validate": [
@@ -42,10 +35,7 @@
     "typescript",
     "typescriptreact"
   ],
-  "eslint.workingDirectories": [
-    "./code",
-    "./scripts"
-  ],
+  "eslint.workingDirectories": ["./code", "./scripts"],
   "files.associations": {
     "*.js": "javascriptreact"
   },
@@ -59,5 +49,6 @@
   "typescript.preferences.preferTypeOnlyAutoImports": true,
   "typescript.preferences.quoteStyle": "single",
   "typescript.preferGoToSourceDefinition": true,
-  "typescript.tsdk": "./code/node_modules/typescript/lib"
-}
+  "typescript.tsdk": "./code/node_modules/typescript/lib",
+  "vitest.workspaceConfig": "./code/vitest.workspace.ts"
+}

code/addons/a11y/src/manager.test.tsx

@@ -56,7 +56,6 @@ describe('A11yManager', () => {
           >
             Accessibility
           </span>
-          
         </Spaced>
       </div>
     `);

code/core/package.json

@@ -326,7 +326,6 @@
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.5.8",
     "@types/ws": "^8",
-    "@vitest/utils": "^1.3.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "@yarnpkg/fslib": "2.10.3",
     "@yarnpkg/libzip": "2.3.0",

code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts

@@ -71,7 +71,7 @@ export const docsRenderer = {
   render: vi.fn().mockImplementation((context, parameters, element) => Promise.resolve()),
   unmount: vi.fn(),
 };
-export const teardownrenderToCanvas: Mock<[TeardownRenderToCanvas]> = vi.fn();
+export const teardownrenderToCanvas: Mock<(teardown: TeardownRenderToCanvas) => void> = vi.fn();
 const rawProjectAnnotations = {
   initialGlobals: { a: 'b' },
   globalTypes: {},

code/lib/cli-storybook/src/upgrade.test.ts

@@ -4,7 +4,8 @@ import { UpgradeStorybookToLowerVersionError } from 'storybook/internal/server-e
 import { doUpgrade, getStorybookVersion } from './upgrade';
 import { logger } from 'storybook/internal/node-logger';
 
-const findInstallationsMock = vi.fn<string[], Promise<sbcc.InstallationMetadata | undefined>>();
+const findInstallationsMock =
+  vi.fn<(arg: string[]) => Promise<sbcc.InstallationMetadata | undefined>>();
 
 vi.mock('storybook/internal/telemetry');
 vi.mock('storybook/internal/common', async (importOriginal) => {

code/lib/instrumenter/package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@vitest/utils": "^1.3.1",
+    "@vitest/utils": "^2.0.5",
     "util": "^0.12.4"
   },
   "devDependencies": {

code/lib/test/package.json

@@ -46,16 +46,16 @@
   "dependencies": {
     "@storybook/csf": "^0.1.11",
     "@storybook/instrumenter": "workspace:*",
-    "@testing-library/dom": "10.1.0",
-    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.4.8",
     "@testing-library/user-event": "14.5.2",
-    "@vitest/expect": "1.6.0",
-    "@vitest/spy": "1.6.0",
+    "@vitest/expect": "2.0.5",
+    "@vitest/spy": "2.0.5",
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "chai": "^4.4.1",
-    "tinyspy": "^2.2.0",
+    "chai": "^5.1.1",
+    "tinyspy": "^3.0.0",
     "ts-dedent": "^2.2.0",
     "type-fest": "~2.19",
     "typescript": "^5.3.2"

code/lib/test/src/expect.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as chai from 'chai';
 import type {
   AsymmetricMatchersContaining,
@@ -65,14 +66,17 @@ export function createExpect() {
   // @ts-expect-error chai.extend is not typed
   expect.extend = (expects: MatchersObject) => chai.expect.extend(expect, expects);
 
+  // @ts-ignore tsup borks here for some reason
   expect.soft = (...args) => {
+    // @ts-ignore tsup borks here for some reason
     const assert = expect(...args);
     expect.setState({
       soft: true,
     });
     return assert;
   };
 
+  // @ts-ignore tsup borks here for some reason
   expect.unreachable = (message?: string): never => {
     chai.assert.fail(`expected${message ? ` "${message}" ` : ' '}not to be reached`);
   };
@@ -123,7 +127,7 @@ export function createExpect() {
   return expect as unknown as Expect;
 }
 
-const expect = createExpect();
+const expect: Expect = createExpect();
 
 // @vitest/expect expects this to be set
 Object.defineProperty(globalThis, GLOBAL_EXPECT, {

code/lib/test/src/index.ts

@@ -1,6 +1,6 @@
 import { instrument } from '@storybook/instrumenter';
 import type { LoaderFunction } from '@storybook/csf';
-import chai from 'chai';
+import * as chai from 'chai';
 import { global } from '@storybook/global';
 import { expect as rawExpect } from './expect';
 import {

code/lib/test/src/spy.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-shadow */
-import type { MockInstance } from '@vitest/spy';
+import type { Mock as MockV2, MockInstance } from '@vitest/spy';
 import {
   spyOn as vitestSpyOn,
   isMockFunction,
@@ -31,11 +31,30 @@ export const spyOn: typeof vitestSpyOn = (...args) => {
   return reactiveMock(mock);
 };
 
-// @ts-expect-error Make sure we export the exact same type as @vitest/spy
-export const fn: typeof vitestFn = (implementation) => {
+type Procedure = (...args: any[]) => any;
+
+// TODO: Remove in 9.0
+export type Mock<T extends Procedure | any[] = any[], R = any> = T extends Procedure
+  ? MockV2<T>
+  : T extends any[]
+    ? MockV2<(...args: T) => R>
+    : never;
+
+// V2
+export function fn<T extends Procedure = Procedure>(implementation?: T): Mock<T>;
+// TODO: Remove in 9.0
+// V1
+export function fn<TArgs extends any[] = any, R = any>(): Mock<(...args: TArgs) => R>;
+export function fn<TArgs extends any[] = any[], R = any>(
+  implementation: (...args: TArgs) => R
+): Mock<(...args: TArgs) => R>;
+export function fn<TArgs extends any[] = any[], R = any>(
+  implementation?: (...args: TArgs) => R
+): Mock<(...args: TArgs) => R>;
+export function fn(implementation?: Procedure) {
   const mock = implementation ? vitestFn(implementation) : vitestFn();
   return reactiveMock(mock);
-};
+}
 
 function reactiveMock(mock: MockInstance) {
   const reactive = listenWhenCalled(mock);

code/package.json

@@ -76,14 +76,13 @@
   ],
   "resolutions": {
     "@playwright/test": "1.36.0",
-    "@testing-library/jest-dom/aria-query": "5.1.3",
     "@types/node": "^18.0.0",
-    "@vitest/expect": "patch:@vitest/expect@npm%3A1.6.0#~/.yarn/patches/@vitest-expect-npm-1.6.0-0e382f8212.patch",
     "esbuild": "^0.23.0",
     "playwright": "1.36.0",
     "playwright-core": "1.36.0",
     "serialize-javascript": "^3.1.0",
-    "type-fest": "~2.19"
+    "type-fest": "~2.19",
+    "@vitest/expect@npm:2.0.5": "patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch"
   },
   "dependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -158,10 +157,10 @@
     "@storybook/web-components": "workspace:*",
     "@storybook/web-components-vite": "workspace:*",
     "@storybook/web-components-webpack5": "workspace:*",
-    "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/express": "^4.17.21",
     "@types/fs-extra": "^11.0.1",
     "@types/lodash": "^4.14.167",
@@ -174,7 +173,7 @@
     "@typescript-eslint/experimental-utils": "^5.62.0",
     "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-react": "^3.0.1",
-    "@vitest/coverage-v8": "^1.2.2",
+    "@vitest/coverage-v8": "^2.0.5",
     "create-storybook": "workspace:*",
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
@@ -208,7 +207,7 @@
     "typescript": "^5.4.3",
     "util": "^0.12.4",
     "vite": "^4.0.0",
-    "vitest": "^1.6.0",
+    "vitest": "^2.0.5",
     "wait-on": "^7.0.1"
   },
   "dependenciesMeta": {

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -135,7 +135,6 @@ describe('CSF3', () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
 
     const div = document.createElement('div');
-    console.log(div.tagName);
     document.body.appendChild(div);
 
     await CSF3InputFieldFilled.run({ canvasElement: div });

code/renderers/react/src/public-types.test.tsx

@@ -319,15 +319,11 @@ it('Infer mock function given to args in meta.', () => {
     play: async ({ args, mount }) => {
       const canvas = await mount(<TestButton {...args} />);
       expectTypeOf(canvas).toEqualTypeOf<Canvas>();
-      expectTypeOf(args.onClick).toEqualTypeOf<Mock<[], void>>();
+      expectTypeOf(args.onClick).toEqualTypeOf<Mock>();
       expectTypeOf(args.onRender).toEqualTypeOf<() => JSX.Element>();
     },
   };
-  type Expected = StoryAnnotations<
-    ReactRenderer,
-    Props & { onClick: Mock<[], void> },
-    Partial<Props>
-  >;
+  type Expected = StoryAnnotations<ReactRenderer, Props & { onClick: Mock }, Partial<Props>>;
 
   expectTypeOf(Basic).toEqualTypeOf<Expected>();
 });

code/vitest.config.ts

@@ -0,0 +1,16 @@
+import { coverageConfigDefaults, defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    coverage: {
+      exclude: [
+        ...coverageConfigDefaults.exclude,
+        '**/__mocks/**',
+        '**/dist/**',
+        'playwright.config.ts',
+        'vitest-setup.ts',
+        'vitest.helpers.ts',
+      ],
+    },
+  },
+});

code/vitest.workspace.ts

@@ -20,21 +20,22 @@ export default defineWorkspace([
  * @see https://circleci.com/docs/configuration-reference/#x86
  * @see .circleci/config.yml#L214
  */
-const threadCount = process.env.CI ? 8 : undefined;
+const threadCount = process.env.CI ? 7 : undefined;
 
 export const vitestCommonConfig = defineConfig({
   test: {
-    passWithNoTests: true,
-    clearMocks: true,
-    setupFiles: [resolve(__dirname, './vitest-setup.ts')],
-    globals: true,
-    testTimeout: 10000,
-    environment: 'node',
+    pool: 'threads',
     poolOptions: {
       threads: {
         minThreads: threadCount,
         maxThreads: threadCount,
       },
     },
+    passWithNoTests: true,
+    clearMocks: true,
+    setupFiles: [resolve(__dirname, './vitest-setup.ts')],
+    globals: true,
+    testTimeout: 10000,
+    environment: 'node',
   },
 });