Release: Patch 8.2.2

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.2.2
+
+- CPC: Add `ESM` export to `docs-tools` & `node-logger` packages - [#28539](https://github.com/storybookjs/storybook/pull/28539), thanks @ndelangen!
+- CPC: Fix missing dependency in `@storybook/addon-interactions` - [#28518](https://github.com/storybookjs/storybook/pull/28518), thanks @ndelangen!
+- CPC: Revert renames of panels, addon_ids - [#28524](https://github.com/storybookjs/storybook/pull/28524), thanks @ndelangen!
+
 ## 8.2.1
 
 - CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen!

code/addons/interactions/package.json

@@ -55,6 +55,7 @@
   "dependencies": {
     "@storybook/global": "^5.0.0",
     "@storybook/instrumenter": "workspace:*",
+    "@storybook/test": "workspace:*",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"
   },

code/core/src/docs-tools/shared.ts

@@ -1,4 +1,4 @@
-export const ADDON_ID = '@storybook/core/docs';
+export const ADDON_ID = 'storybook/docs';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `docs`;
 

code/core/src/manager-api/tests/layout.test.ts

@@ -471,14 +471,14 @@ describe('layout API', () => {
     });
 
     it('should set selectedPanel initially', () => {
-      const panelName = '@storybook/core/a11y/panel';
+      const panelName = 'storybook/a11y/panel';
       layoutApi.setOptions({ selectedPanel: panelName });
 
       expect(getLastSetStateArgs()[0].selectedPanel).toEqual(panelName);
     });
 
     it('should change selectedPanel if it is defined in the options and is different', () => {
-      const panelName = '@storybook/core/a11y/panel';
+      const panelName = 'storybook/a11y/panel';
       layoutApi.setOptions({});
       layoutApi.setOptions({ selectedPanel: panelName });
 

code/core/src/preview-errors.ts

@@ -210,27 +210,23 @@ export class StoryStoreAccessedBeforeInitializationError extends StorybookError
 
 export class MountMustBeDestructuredError extends StorybookError {
   constructor(public data: { playFunction: string }) {
-    const transpiled =
-      /function\s*\*|regeneratorRuntime|asyncToGenerator|_ref|param|_0|__async/.test(
-        data.playFunction
-      );
-
     super({
       category: Category.PREVIEW_API,
       code: 12,
       message: dedent`
 
-      To use mount in the play function, you must use object destructuring, e.g. play: ({ mount }) => {}.
-
-      ${
-        !transpiled
-          ? ''
-          : dedent`
-          It seems that your builder is configured to transpile destructuring.
-          To use the mount prop of the story context, you must configure your builder to transpile to no earlier than ES2017.          
-          `
-      }
-      More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-each-test
+      To use mount in the play function, you must satisfy the following two requirements: 
+
+      1. You *must* destructure the mount property from the \`context\` (the argument passed to your play function). 
+         This makes sure that Storybook does not start rendering the story before the play function begins.
+
+      2. Your Storybook framework or builder must be configured to transpile to ES2017 or newer. 
+         This is because destructuring statements and async/await usages are otherwise transpiled away, 
+         which prevents Storybook from recognizing your usage of \`mount\`.
+
+      Note that Angular is not supported. As async/await is transpiled to support the zone.js polyfill. 
+
+      More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered
 
       Received the following play function:
       ${data.playFunction}`,

code/deprecated/docs-tools/package.json

@@ -23,11 +23,13 @@
   "exports": {
     ".": {
       "types": "./shim.d.ts",
+      "import": "./shim.mjs",
       "require": "./shim.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./shim.js",
+  "module": "./shim.mjs",
   "types": "./shim.d.ts",
   "files": [
     "README.md",

code/deprecated/docs-tools/shim.mjs

@@ -0,0 +1 @@
+export * from 'storybook/internal/docs-tools';

code/deprecated/node-logger/package.json

@@ -23,11 +23,13 @@
   "exports": {
     ".": {
       "types": "./shim.d.ts",
+      "module": "./shim.mjs",
       "require": "./shim.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./shim.js",
+  "module": "./shim.mjs",
   "types": "./shim.d.ts",
   "files": [
     "README.md",

code/deprecated/node-logger/shim.mjs

@@ -0,0 +1 @@
+export * from 'storybook/internal/node-logger';

code/package.json

@@ -278,5 +278,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.2.2"
 }

code/yarn.lock

@@ -5236,6 +5236,7 @@ __metadata:
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/instrumenter": "workspace:*"
+    "@storybook/test": "workspace:*"
     "@types/node": "npm:^18.0.0"
     formik: "npm:^2.2.9"
     polished: "npm:^4.2.2"

docs/_snippets/before-all-in-preview.md

@@ -0,0 +1,24 @@
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import { init } from '../project-bootstrap';
+
+export default {
+  async beforeAll() {
+    await init();
+  },
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import { Preview } from '@storybook/your-renderer';
+
+import { init } from '../project-bootstrap';
+
+const preview: Preview = {
+  async beforeAll() {
+    await init();
+  },
+};
+
+export default preview;
+```

docs/_snippets/before-each-in-preview.md

@@ -0,0 +1,24 @@
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import MockDate from 'mockdate';
+
+export default {
+  async beforeEach() {
+    MockDate.reset()
+  }
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import { Preview } from '@storybook/your-renderer';
+import MockDate from 'mockdate';
+
+const preview: Preview = {
+  async beforeEach() {
+    MockDate.reset()
+  }
+};
+
+export default preview;
+```
+

docs/_snippets/button-snapshot-test-portable-stories.md

@@ -1,14 +1,12 @@
 ```js filename="test/Button.test.js|ts" renderer="react" language="js" tabTitle="jest"
-import { render } from '@testing-library/react';
-
 import { composeStories } from '@storybook/react';
 
 import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  const mounted = render(<Primary />);
-  expect(mounted.container).toMatchSnapshot();
+  await Primary.play();
+  expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
 
@@ -17,16 +15,14 @@ test('Button snapshot', async () => {
 
 import { expect, test } from 'vitest';
 
-import { render } from '@testing-library/react';
-
 import { composeStories } from '@storybook/react';
 
 import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  const mounted = render(Primary());
-  expect(mounted.container).toMatchSnapshot();
+  await Primary.play();
+  expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
 
@@ -35,16 +31,29 @@ test('Button snapshot', async () => {
 
 import { expect, test } from 'vitest';
 
-import { render } from '@testing-library/vue';
-
 import { composeStories } from '@storybook/vue3';
 
 import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  const mounted = render(Primary());
-  expect(mounted.container).toMatchSnapshot();
+  await Primary.play();
+  expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
 
+```js filename="__tests__/Button.spec.js|ts" renderer="svelte" language="js"
+// @vitest-environment jsdom
+
+import { expect, test } from 'vitest';
+
+import { composeStories } from '@storybook/svelte';
+
+import * as stories from '../stories/Button.stories';
+
+const { Primary } = composeStories(stories);
+test('Button snapshot', async () => {
+  await Primary.play();
+  expect(document.body.firstChild).toMatchSnapshot();
+});
+```

docs/_snippets/component-test-with-testing-library.md

@@ -26,7 +26,7 @@ import { render, fireEvent } from '@testing-library/preact';
 
 import { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here.
 
-it('Checks if the form is valid', () => {
+it('Checks if the form is valid', async () => {
   const { getByTestId, getByText } = render(<InvalidForm {...InvalidForm.args} />);
 
   fireEvent.click(getByText('Submit'));
@@ -39,14 +39,15 @@ it('Checks if the form is valid', () => {
 ```js filename="Form.test.js|jsx" renderer="react" language="js"
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { composeStory } from '@storybook/react';
+import { composeStories } from '@storybook/react';
 
-import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here.
+import * as stories from './LoginForm.stories'; // 👈 Our stories imported here.
 
-const FormError = composeStory(InvalidFormStory, Meta);
+const { InvalidForm } = composeStories(stories);
 
-test('Checks if the form is valid', () => {
-  render(<FormError />);
+test('Checks if the form is valid', async () => {
+  // Renders the composed story
+  await InvalidForm.play();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -62,14 +63,15 @@ test('Checks if the form is valid', () => {
 ```ts filename="Form.test.ts|tsx" renderer="react" language="ts"
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { composeStory } from '@storybook/react';
+import { composeStories } from '@storybook/react';
 
-import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here.
+import * as stories from './LoginForm.stories'; // 👈 Our stories imported here.
 
-const FormError = composeStory(InvalidFormStory, Meta);
+const { InvalidForm } = composeStories(stories);
 
-test('Checks if the form is valid', () => {
-  render(<FormError />);
+test('Checks if the form is valid', async () => {
+  // Renders the composed story
+  await InvalidForm.play();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -82,36 +84,38 @@ test('Checks if the form is valid', () => {
 });
 ```
 
-```js filename="Form.test.js|ts" renderer="svelte" language="js"
-import { render, fireEvent } from '@testing-library/svelte';
+```js filename="Form.test.js" renderer="svelte" language="js"
+import { fireEvent, render, screen } from '@testing-library/svelte';
 
-import LoginForm from './LoginForm.svelte';
+import { composeStories } from '@storybook/svelte';
 
-import { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here.
+import * as stories from './LoginForm.stories'; // 👈 Our stories imported here.
+
+const { InvalidForm } = composeStories(stories);
 
 it('Checks if the form is valid', async () => {
-  const { getByTestId, getByText } = render(LoginForm, {
-    props: InvalidForm.args,
-  });
+  // Renders the composed story
+  await InvalidForm.play();
 
-  await fireEvent.click(getByText('Submit'));
+  await fireEvent.click(screen.getByText('Submit'));
 
-  const isFormValid = getByTestId('invalid-form');
+  const isFormValid = screen.getByTestId('invalid-form');
   expect(isFormValid).toBeInTheDocument();
 });
 ```
 
 ```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStory } from '@storybook/vue3';
+import { composeStories } from '@storybook/vue3';
 
-import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here.
+import * as stories from './LoginForm.stories'; // 👈 Our stories imported here.
 
-const FormError = composeStory(InvalidFormStory, Meta);
+const { InvalidForm } = composeStories(stories);
 
-test('Checks if the form is valid', () => {
-  render(FormError());
+test('Checks if the form is valid', async () => {
+  // Renders the composed story
+  await InvalidForm.play();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -127,14 +131,15 @@ test('Checks if the form is valid', () => {
 ```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
 import { fireEvent, render, screen } from '@testing-library/vue';
 
-import { composeStory } from '@storybook/vue3';
+import { composeStories } from '@storybook/vue3';
 
-import Meta, { InvalidForm as InvalidFormStory } from './LoginForm.stories'; //👈 Our stories imported here.
+import * as stories from './LoginForm.stories'; // 👈 Our stories imported here.
 
-const FormError = composeStory(InvalidFormStory, Meta);
+const { InvalidForm } = composeStories(stories);
 
-test('Checks if the form is valid', () => {
-  render(FormError());
+test('Checks if the form is valid', async () => {
+  // Renders the composed story
+  await InvalidForm.play();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -146,4 +151,3 @@ test('Checks if the form is valid', () => {
   expect(isFormValid).toBeInTheDocument();
 });
 ```
-