Test: Upgrade Vitest to v2

.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

@@ -309,7 +309,6 @@
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.3.4",
     "@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/lib/cli/src/upgrade.test.ts

@@ -4,7 +4,8 @@ import { UpgradeStorybookToLowerVersionError } from 'storybook/internal/server-e
 import { doUpgrade, getStorybookVersion } from './upgrade';
 import { logger } from '@storybook/core/node-logger';
 
-const findInstallationsMock = vi.fn<string[], Promise<sbcc.InstallationMetadata | undefined>>();
+const findInstallationsMock =
+  vi.fn<(arg: string[]) => Promise<sbcc.InstallationMetadata | undefined>>();
 
 vi.mock('@storybook/core/telemetry');
 vi.mock('@storybook/core/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",
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
@@ -207,7 +206,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 });