Merge pull request #25584 from storybookjs/valentin/replace-storybook…

…-jest-by-test

Interaction: Replace @storybook/jest by @storybook/test

code/addons/docs/template/stories/docspage/autoplay.stories.ts

@@ -1,5 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { within } from '@storybook/testing-library';
 
 export default {

code/addons/interactions/package.json

@@ -62,7 +62,6 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
-    "@storybook/jest": "next",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/testing-library": "next",

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
 import { getCalls } from '../mocks';

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import isChromatic from 'chromatic/isChromatic';
 
 import { getCalls, getInteractions } from '../mocks';

code/frameworks/angular/src/builders/build-storybook/index.spec.ts

@@ -3,7 +3,7 @@
  */
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { vi, describe, beforeEach, expect } from 'vitest';
+import { vi, describe, beforeEach, expect, it, afterEach } from 'vitest';
 import { Architect, createBuilder } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';

code/frameworks/angular/src/builders/start-storybook/index.spec.ts

@@ -3,7 +3,7 @@
  */
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { vi, describe, expect, it, beforeEach } from 'vitest';
+import { vi, describe, expect, it, beforeEach, afterEach } from 'vitest';
 import { Architect, createBuilder } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';

code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.test.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ArgTypes } from '@storybook/types';
+import { describe, it, expect } from 'vitest';
 import { computesTemplateSourceFromComponent } from './ComputesTemplateFromComponent';
 import { ISomeInterface, ButtonAccent, InputComponent } from './__testfixtures__/input.component';
 

code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts

@@ -1,4 +1,4 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { Component, ɵresetJitOptions } from '@angular/core';
 import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -14,7 +14,6 @@ describe('RendererFactory', () => {
   let rendererFactory: RendererFactory;
   let rootTargetDOMNode: HTMLElement;
   let rootDocstargetDOMNode: HTMLElement;
-  let storyInDocstargetDOMNode: HTMLElement;
 
   beforeEach(async () => {
     rendererFactory = new RendererFactory();

code/frameworks/angular/src/client/angular-beta/StorybookModule.test.ts

@@ -1,4 +1,5 @@
-import { NgModule, Type, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgModule, Component, EventEmitter, Input, Output } from '@angular/core';
+import { describe, expect, it } from 'vitest';
 
 import { TestBed } from '@angular/core/testing';
 import { BehaviorSubject } from 'rxjs';

code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts

@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { describe, expect, it } from 'vitest';
 
 import {
   getComponentInputsOutputs,

code/frameworks/angular/src/client/angular-beta/utils/NgModulesAnalyzer.test.ts

@@ -1,4 +1,5 @@
 import { Component, NgModule } from '@angular/core';
+import { describe, expect, it } from 'vitest';
 import { isComponentAlreadyDeclared } from './NgModulesAnalyzer';
 
 const FooComponent = Component({})(class {});

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts

@@ -9,7 +9,7 @@ import {
   provideNoopAnimations,
 } from '@angular/platform-browser/animations';
 import { NgModuleMetadata } from '../../types';
-import { PropertyExtractor, REMOVED_MODULES } from './PropertyExtractor';
+import { PropertyExtractor } from './PropertyExtractor';
 import { WithOfficialModule } from '../__testfixtures__/test.module';
 
 const TEST_TOKEN = new InjectionToken('testToken');
@@ -18,7 +18,6 @@ const TestService = Injectable()(class {});
 const TestComponent1 = Component({})(class {});
 const TestComponent2 = Component({})(class {});
 const StandaloneTestComponent = Component({ standalone: true })(class {});
-const TestDirective = Directive({})(class {});
 const StandaloneTestDirective = Directive({ standalone: true })(class {});
 const TestModuleWithDeclarations = NgModule({ declarations: [TestComponent1] })(class {});
 const TestModuleWithImportsAndProviders = NgModule({

code/frameworks/angular/src/client/argsToTemplate.test.ts

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

code/frameworks/angular/src/client/decorateStory.test.ts

@@ -1,5 +1,6 @@
 import { Component, Input, Output } from '@angular/core';
 import { DecoratorFunction, StoryContext } from '@storybook/types';
+import { describe, expect, it } from 'vitest';
 import { componentWrapperDecorator } from './decorators';
 
 import decorateStory from './decorateStory';

code/frameworks/angular/src/client/docs/angular-properties.test.ts

@@ -1,36 +1,10 @@
 import path from 'path';
 import fs from 'fs';
-import tmp from 'tmp';
-import { sync as spawnSync } from 'cross-spawn';
-
-import { findComponentByName, extractArgTypesFromData } from './compodoc';
-
-// @ts-expect-error (Converted from ts-ignore)
-const { SNAPSHOT_OS } = global;
+import { describe, expect, it } from 'vitest';
 
 // File hierarchy: __testfixtures__ / some-test-case / input.*
 const inputRegExp = /^input\..*$/;
 
-const runCompodoc = (inputPath: string) => {
-  const testDir = path.dirname(inputPath);
-  const { name: tmpDir, removeCallback } = tmp.dirSync();
-
-  // FIXME: for now, this requires a tsconfig.json for each test case. Tried generating
-  // one dynamically in tmpDir, but compodoc doesn't handle absolute paths properly
-  // (and screwed around with relative paths as well, but couldn't get it working)
-  spawnSync('yarn', ['compodoc', '-p', `${testDir}/tsconfig.json`, '-e', 'json', '-d', tmpDir], {
-    stdio: 'inherit',
-    shell: true,
-  });
-  const output = fs.readFileSync(`${tmpDir}/documentation.json`, 'utf8');
-  try {
-    removeCallback();
-  } catch (e) {
-    //
-  }
-  return output;
-};
-
 describe('angular component properties', () => {
   const fixturesDir = path.join(__dirname, '__testfixtures__');
   fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach((testEntry) => {

code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts

@@ -1,7 +1,7 @@
 import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { importProvidersFrom } from '@angular/core';
 import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
 

code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/angular';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { importProvidersFrom } from '@angular/core';
 import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
 

code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import Head from 'next/head';
 import React from 'react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';

code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts

@@ -3,7 +3,7 @@ import { type StoriesEntry } from '@storybook/types';
 import { normalizeStoriesEntry } from '@storybook/core-common';
 import { join } from 'path';
 import slash from 'slash';
-import { vi, it, describe } from 'vitest';
+import { vi, it, describe, expect } from 'vitest';
 import { removeMDXEntries } from '../remove-mdx-entries';
 
 const configDir = '/configDir/';

code/lib/preview-api/template/stories/argMapping.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 const arrows = {
   ArrowUp: { name: 'ArrowUp' },

code/lib/preview-api/template/stories/argTypes.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/args.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import pick from 'lodash/pick';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 

code/lib/preview-api/template/stories/autotitle.stories.ts

@@ -1,5 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { PlayFunctionContext } from '@storybook/types';
 
 export default {

code/lib/preview-api/template/stories/component-play.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/decorators.stories.ts

@@ -6,7 +6,7 @@ import type {
   StoryContext,
 } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { useEffect } from '@storybook/preview-api';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 

code/lib/preview-api/template/stories/globals.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/indexer.stories.ts

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { global as globalThis } from '@storybook/global';
 import type { PlayFunctionContext } from '@storybook/types';
 

code/lib/preview-api/template/stories/loaders.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/names.stories.ts

@@ -1,5 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { PlayFunctionContext } from '@storybook/types';
 
 export default {

code/lib/preview-api/template/stories/parameters.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/rendering.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PlayFunctionContext } from '@storybook/types';
 import { within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import {
   FORCE_REMOUNT,
   RESET_STORY_ARGS,

code/lib/preview-api/template/stories/shortcuts.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import { userEvent, within } from '@storybook/testing-library';
 import { PREVIEW_KEYDOWN } from '@storybook/core-events';
-import { jest, expect } from '@storybook/jest';
+import { expect, fn } from '@storybook/test';
 import type { PlayFunctionContext } from '@storybook/csf';
 
 export default {
@@ -13,7 +13,7 @@ export const KeydownDuringPlay = {
   play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
 
-    const previewKeydown = jest.fn();
+    const previewKeydown = fn();
     channel.on(PREVIEW_KEYDOWN, previewKeydown);
     const button = await within(canvasElement).findByText('Submit');
     await userEvent.type(button, 's');

code/lib/preview-api/template/stories/tags.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/title.stories.ts

@@ -1,5 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { PlayFunctionContext } from '@storybook/types';
 
 export default {

code/package.json

@@ -134,7 +134,6 @@
     "@storybook/html-vite": "workspace:*",
     "@storybook/html-webpack5": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
-    "@storybook/jest": "next",
     "@storybook/linter-config": "^3.1.2",
     "@storybook/manager": "workspace:*",
     "@storybook/manager-api": "workspace:*",
@@ -162,6 +161,7 @@
     "@storybook/svelte": "workspace:*",
     "@storybook/svelte-webpack5": "workspace:*",
     "@storybook/telemetry": "workspace:*",
+    "@storybook/test": "next",
     "@storybook/testing-library": "next",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",

code/renderers/svelte/template/stories/args.stories.js

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import {
   UPDATE_STORY_ARGS,

code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { within } from '@storybook/testing-library';
 import { inject } from 'vue';

code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { global as globalThis } from '@storybook/global';
 import type { Meta, StoryObj, StoryFn } from '@storybook/vue3';
 import { within, userEvent } from '@storybook/testing-library';

code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { global as globalThis } from '@storybook/global';
 import { within } from '@storybook/testing-library';
 import { STORY_ARGS_UPDATED, RESET_STORY_ARGS, UPDATE_STORY_ARGS } from '@storybook/core-events';

code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import { global as globalThis } from '@storybook/global';
 import type { Channel } from '@storybook/channels';
 import { within } from '@storybook/testing-library';

code/ui/blocks/src/controls/Boolean.stories.tsx

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, fireEvent, waitFor } from '@storybook/testing-library';
 import { addons } from '@storybook/preview-api';

code/ui/blocks/src/examples/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, fireEvent } from '@storybook/testing-library';
 import React from 'react';

code/ui/components/src/components/tabs/tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import React, { Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';

code/ui/manager/src/components/sidebar/Menu.stories.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
-import { expect } from '@storybook/jest';
+import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TooltipLinkList } from '@storybook/components';