Portable stories: Use internal Storybook renderers mechanism

code/core/src/preview-errors.ts

@@ -235,42 +235,6 @@ export class MountMustBeDestructuredError extends StorybookError {
   }
 }
 
-export class TestingLibraryMustBeConfiguredError extends StorybookError {
-  constructor() {
-    super({
-      category: Category.PREVIEW_API,
-      code: 13,
-      message: dedent`
-        You must configure testingLibraryRender to use play in portable stories.
-
-        import { render } from '@testing-library/[renderer]';
-
-        setProjectAnnotations({
-          testingLibraryRender: render,
-        });
-
-        For other testing renderers, you can configure \`renderToCanvas\` like so:
-
-        import { render } from 'your-test-renderer';
-
-        setProjectAnnotations({
-          renderToCanvas: ({ storyFn }) => {
-            const Story = storyFn();
-
-            // Svelte
-            render(Story.Component, Story.props);
-
-            // Vue
-            render(Story);
-
-            // or for React
-            render(<Story/>);
-          },
-        });`,
-    });
-  }
-}
-
 export class NoRenderFunctionError extends StorybookError {
   constructor(public data: { id: string }) {
     super({

code/lib/react-dom-shim/src/preventActChecks.tsx

@@ -0,0 +1,18 @@
+export {};
+
+declare const globalThis: {
+  IS_REACT_ACT_ENVIRONMENT?: boolean;
+};
+
+// TODO(9.0): We should actually wrap all those lines in `act`, but that might be a breaking change.
+// We should make that breaking change for SB 9.0
+// Write issue
+export function preventActChecks(callback: () => void): void {
+  const originalActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT;
+  globalThis.IS_REACT_ACT_ENVIRONMENT = false;
+  try {
+    callback();
+  } finally {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = originalActEnvironment;
+  }
+}

code/lib/react-dom-shim/src/react-16.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable react/no-deprecated */
 import type { ReactElement } from 'react';
 import * as ReactDOM from 'react-dom';
+import { preventActChecks } from './preventActChecks';
 
 export const renderElement = async (node: ReactElement, el: Element) => {
   return new Promise<null>((resolve) => {
-    ReactDOM.render(node, el, () => resolve(null));
+    preventActChecks(() => void ReactDOM.render(node, el, () => resolve(null)));
   });
 };
 
 export const unmountElement = (el: Element) => {
-  ReactDOM.unmountComponentAtNode(el);
+  preventActChecks(() => void ReactDOM.unmountComponentAtNode(el));
 };

code/lib/react-dom-shim/src/react-18.tsx

@@ -2,6 +2,7 @@ import type { FC, ReactElement } from 'react';
 import * as React from 'react';
 import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
 import * as ReactDOM from 'react-dom/client';
+import { preventActChecks } from './preventActChecks';
 
 // A map of all rendered React 18 nodes
 const nodes = new Map<Element, ReactRoot>();
@@ -26,15 +27,17 @@ export const renderElement = async (node: ReactElement, el: Element, rootOptions
   const root = await getReactRoot(el, rootOptions);
 
   return new Promise((resolve) => {
-    root.render(<WithCallback callback={() => resolve(null)}>{node}</WithCallback>);
+    preventActChecks(() =>
+      root.render(<WithCallback callback={() => resolve(null)}>{node}</WithCallback>)
+    );
   });
 };
 
 export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {
   const root = nodes.get(el);
 
   if (root) {
-    root.unmount();
+    preventActChecks(() => root.unmount());
     nodes.delete(el);
   }
 };

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

@@ -14,7 +14,7 @@ import { setProjectAnnotations, composeStories, composeStory } from '..';
 import type { Button } from './Button';
 import * as stories from './Button.stories';
 
-setProjectAnnotations([{ testingLibraryRender: render }]);
+setProjectAnnotations([]);
 
 // example with composeStories, returns an object with all stories composed with args/decorators
 const { CSF3Primary, LoaderStory, MountInPlayFunction } = composeStories(stories);
@@ -77,7 +77,6 @@ describe('projectAnnotations', () => {
   it('renders with default projectAnnotations', () => {
     setProjectAnnotations([
       {
-        testingLibraryRender: render,
         parameters: { injected: true },
         globalTypes: {
           locale: { defaultValue: 'en' },

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

@@ -47,9 +47,7 @@ export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRende
   ...reactProjectAnnotations,
   renderToCanvas: (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
-      throw new TestingLibraryMustBeConfiguredError();
-      // Enable for 8.3
-      // return reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+      return reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
     }
     const {
       storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render },

code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts

@@ -11,7 +11,7 @@
 import type Button from './Button.svelte';
 import { composeStories, composeStory, setProjectAnnotations } from '../../portable-stories';
 
-setProjectAnnotations({ testingLibraryRender: render });
+setProjectAnnotations([]);
 
 // example with composeStories, returns an object with all stories composed with args/decorators
 const { CSF3Primary, LoaderStory } = composeStories(stories);
@@ -82,7 +82,6 @@
         globalTypes: {
           locale: { defaultValue: 'en' },
         },
-        testingLibraryRender: render,
       },
     ]);
     const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);
@@ -172,5 +171,5 @@
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
   if (_storyName === 'CSF2StoryWithLocale') return;
   await Story.run();
   expect(document.body).toMatchSnapshot();
 });

code/renderers/svelte/src/portable-stories.ts

@@ -65,9 +65,7 @@ export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<SvelteRend
   ...svelteProjectAnnotations,
   renderToCanvas: (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
-      throw new TestingLibraryMustBeConfiguredError();
-      // Enable for 8.3
-      // return svelteProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+      return svelteProjectAnnotations.renderToCanvas(renderContext, canvasElement);
     }
     const {
       storyFn,

code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts

@@ -11,7 +11,7 @@
 import type Button from './Button.vue';
 import { composeStories, composeStory, setProjectAnnotations } from '../../portable-stories';
 
-setProjectAnnotations({ testingLibraryRender: render });
+setProjectAnnotations([]);
 
 // example with composeStories, returns an object with all stories composed with args/decorators
 const { CSF3Primary, LoaderStory } = composeStories(stories);
@@ -60,7 +60,6 @@
   it('renders with default projectAnnotations', () => {
     setProjectAnnotations([
       {
-        testingLibraryRender: render,
         parameters: { injected: true },
         globalTypes: {
           locale: { defaultValue: 'en' },
@@ -147,5 +146,5 @@
   if (typeof Story === 'string' || _storyName === 'CSF2StoryWithLocale') return;
   await Story.run();
   await new Promise((resolve) => setTimeout(resolve, 0));
   expect(document.body).toMatchSnapshot();
 });

code/renderers/vue3/src/portable-stories.ts

@@ -55,9 +55,7 @@ export const vueProjectAnnotations: ProjectAnnotations<VueRenderer> = {
   ...defaultProjectAnnotations,
   renderToCanvas: (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
-      throw new TestingLibraryMustBeConfiguredError();
-      // Enable for 8.3
-      // return defaultProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+      return defaultProjectAnnotations.renderToCanvas(renderContext, canvasElement);
     }
     const {
       storyFn,

docs/_snippets/portable-stories-jest-set-project-annotations.md

@@ -1,6 +1,5 @@
 ```tsx filename="setupTest.ts" renderer="react" language="ts"
 import { beforeAll } from '@jest/globals';
-import { render as testingLibraryRender } from '@testing-library/react';
 import { setProjectAnnotations } from '@storybook/react';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
@@ -9,8 +8,6 @@ import * as previewAnnotations from './.storybook/preview';
 const annotations = setProjectAnnotations([
   previewAnnotations,
   addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
 ]);
 
 // Supports beforeAll hook from Storybook
@@ -19,7 +16,6 @@ beforeAll(annotations.beforeAll);
 
 ```tsx filename="setupTest.ts" renderer="vue" language="ts"
 import { beforeAll } from '@jest/globals';
-import { render as testingLibraryRender } from '@testing-library/vue';
 import { setProjectAnnotations } from '@storybook/vue3';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
@@ -28,8 +24,6 @@ import * as previewAnnotations from './.storybook/preview';
 const annotations = setProjectAnnotations([
   previewAnnotations,
   addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
 ]);
 
 // Supports beforeAll hook from Storybook

docs/_snippets/portable-stories-playwright-ct-compose-stories.md

@@ -8,8 +8,6 @@ import * as previewAnnotations from './.storybook/preview';
 const annotations = setProjectAnnotations([
   previewAnnotations,
   addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
 ]);
 
 // Supports beforeAll hook from Storybook
@@ -26,8 +24,6 @@ import * as previewAnnotations from './.storybook/preview';
 const annotations = setProjectAnnotations([
   previewAnnotations,
   addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
 ]);
 
 // Supports beforeAll hook from Storybook

docs/_snippets/portable-stories-vitest-set-project-annotations.md

@@ -1,16 +1,13 @@
 ```tsx filename="setupTest.ts" renderer="react" language="ts"
 import { beforeAll } from 'vitest';
-import { render as testingLibraryRender } from '@testing-library/react';
 import { setProjectAnnotations } from '@storybook/react';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
 const annotations = setProjectAnnotations([
   previewAnnotations,
-  addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
+  addonAnnotations
 ]);
 
 // Run Storybook's beforeAll hook
@@ -19,17 +16,14 @@ beforeAll(annotations.beforeAll);
 
 ```tsx filename="setupTest.ts" renderer="svelte" language="ts"
 import { beforeAll } from 'vitest';
-import { render as testingLibraryRender } from '@testing-library/svelte';
 import { setProjectAnnotations } from '@storybook/svelte';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
 const annotations = setProjectAnnotations([
   previewAnnotations,
-  addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
+  addonAnnotations
 ]);
 
 // Run Storybook's beforeAll hook
@@ -38,17 +32,14 @@ beforeAll(annotations.beforeAll);
 
 ```tsx filename="setupTest.ts" renderer="vue" language="ts"
 import { beforeAll } from 'vitest';
-import { render as testingLibraryRender } from '@testing-library/vue';
 import { setProjectAnnotations } from '@storybook/vue3';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
 const annotations = setProjectAnnotations([
   previewAnnotations,
-  addonAnnotations,
-  // You MUST provide this option to use portable stories with vitest
-  { testingLibraryRender },
+  addonAnnotations
 ]);
 
 // Run Storybook's beforeAll hook

docs/api/portable-stories/portable-stories-jest.mdx

@@ -160,12 +160,11 @@ sidebar:
   ## setProjectAnnotations
 
   This API should be called once, before the tests run, typically in a [setup file](https://jestjs.io/docs/configuration#setupfiles-array). This will make sure that whenever `composeStories` or `composeStory` are called, the project annotations are taken into account as well.
-  
+
   These are the configurations needed in the setup file:
   - preview annotations: those defined in `.storybook/preview.ts`
   - addon annotations (optional): those exported by addons
   - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
-  - testingLibraryRender: the render function from Testing Library
 
   {/* prettier-ignore-start */}
 

docs/api/portable-stories/portable-stories-vitest.mdx

@@ -166,25 +166,18 @@ sidebar:
   ## setProjectAnnotations
 
   This API should be called once, before the tests run, typically in a [setup file](https://vitest.dev/config/#setupfiles). This will make sure that whenever `composeStories` or `composeStory` are called, the project annotations are taken into account as well.
-  
+
   These are the configurations needed in the setup file:
   - preview annotations: those defined in `.storybook/preview.ts`
   - addon annotations (optional): those exported by addons
   - beforeAll: code that runs before all tests ([more info](../../writing-tests/interaction-testing.mdx#beforeall))
-  - testingLibraryRender: the render function from Testing Library
 
   {/* prettier-ignore-start */}
 
   <CodeSnippets path="portable-stories-vitest-set-project-annotations.md" />
 
   {/* prettier-ignore-end */}
 
-  <Callout variant="warning">
-
-  You **must** provide `testingLibraryRenderer` to use portable stories with Vitest.
-
-  </Callout>
-
   {/* TODO: Create issue for interest in non-Testing Library render option, with recipe, and mention here (Jest, too) */}
 
   Sometimes a story can require an addon's [decorator](../../writing-stories/decorators.mdx) or [loader](../../writing-stories/loaders.mdx) to render properly. For example, an addon can apply a decorator that wraps your story in the necessary router context. In this case, you must include that addon's `preview` export in the project annotations set. See `addonAnnotations` in the example above.

docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx

@@ -78,12 +78,6 @@ By default, the test-runner provides you with the option to run multiple testing
 
   {/* prettier-ignore-end */}
 
-  <Callout variant="warning">
-
-  You **must** provide `testingLibraryRenderer` to use portable stories with Vitest or Jest.
-
-  </Callout>
-
   #### Configure the testing framework for portable stories
 
   To help you migrate from Storyshots addon to Storybook's portable stories with the `composeStories` helper API, we've prepared examples to help you get started. Listed below are examples of two of the most popular testing frameworks: [Jest](https://jestjs.io/) and [Vitest](https://vitest.dev/). We recommend placing the code in a newly created `storybook.test.ts|js` file and adjusting the code accordingly, depending on your testing framework. Both examples below will:

test-storybooks/portable-stories-kitchen-sink/nextjs/jest.setup.ts

@@ -4,7 +4,6 @@ import { ReactRenderer } from '@storybook/react';
 import { setProjectAnnotations } from '@storybook/nextjs';
 import * as addonInteractions from '@storybook/addon-interactions/preview';
 import * as addonActions from '@storybook/addon-essentials/actions/preview';
-import { render } from '@testing-library/react';
 
 /**
  * For some weird reason, Jest in Nextjs throws the following error:
@@ -18,5 +17,4 @@ setProjectAnnotations([
   sbAnnotations,
   addonInteractions as ProjectAnnotations<ReactRenderer>, // instruments actions as spies
   addonActions as ProjectAnnotations<ReactRenderer>, // creates actions from argTypes
-  { testingLibraryRender: render },
 ]);

test-storybooks/portable-stories-kitchen-sink/react/jest.setup.ts

@@ -4,11 +4,9 @@ import { ReactRenderer, setProjectAnnotations } from '@storybook/react';
 import sbAnnotations from './.storybook/preview';
 import * as addonInteractions from '@storybook/addon-interactions/preview';
 import * as addonActions from '@storybook/addon-essentials/actions/preview';
-import { render } from '@testing-library/react';
 
 setProjectAnnotations([
   sbAnnotations,
   addonInteractions as ProjectAnnotations<ReactRenderer>, // instruments actions as spies
   addonActions as ProjectAnnotations<ReactRenderer>, // creates actions from argTypes
-  { testingLibraryRender: render },
 ]);

test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx

@@ -63,7 +63,7 @@ describe('projectAnnotations', () => {
   });
 
   it('renders with custom projectAnnotations via setProjectAnnotations', () => {
-    setProjectAnnotations([{ parameters: { injected: true }, testingLibraryRender: render }]);
+    setProjectAnnotations([{ parameters: { injected: true } }]);
     const Story = composeStory(stories.CSF2StoryWithLocale, stories.default);
     expect(Story.parameters?.injected).toBe(true);
   });