Merge pull request #30334 from storybookjs/version-patch-from-8.5.0

Release: Patch 8.5.1

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.5.1
+
+- Addon Test: Replace `interaction test` -> `component test` - [#30333](https://github.com/storybookjs/storybook/pull/30333), thanks @kylegach!
+- Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!
+- Manager: Fix escaping of single quotes in dynamic import paths - [#30278](https://github.com/storybookjs/storybook/pull/30278), thanks @valentinpalkovic!
+- RNW-Vite: Support requires for images/fonts - [#30305](https://github.com/storybookjs/storybook/pull/30305), thanks @dannyhw!
+
 ## 8.5.0
 
 Storybook 8.5 is packed with powerful features to enhance your development workflow. This release makes it easier than ever to build accessible, well-tested UIs. Here’s what’s new:

code/addons/test/src/components/EmptyState.tsx

@@ -46,10 +46,10 @@ export const Empty = () => {
 
   return (
     <EmptyTabContent
-      title="Interaction testing"
+      title="Component testing"
       description={
         <>
-          Interaction tests allow you to verify the functional aspects of UIs. Write a play function
+          Component tests allow you to verify the functional aspects of UIs. Write a play function
           for your story and you&apos;ll see it run here.
         </>
       }

code/core/src/builder-manager/utils/managerEntries.ts

@@ -60,7 +60,8 @@ export async function wrapManagerEntries(entrypoints: string[], uniqueId?: strin
         const directory = dirname(location);
         await mkdir(directory, { recursive: true });
       }
-      await writeFile(location, `import '${slash(entry)}';`);
+
+      await writeFile(location, `import '${slash(entry).replaceAll(/'/g, "\\'")}';`);
 
       return location;
     })

code/frameworks/angular/template/cli/page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<PageComponent>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/experimental-nextjs-vite/template/cli/ts-3-8/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/nextjs/template/cli/js/Page.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/frameworks/react-native-web-vite/package.json

@@ -62,6 +62,7 @@
     "@storybook/react-vite": "workspace:*",
     "@vitejs/plugin-react": "^4.3.2",
     "vite-plugin-babel": "^1.3.0",
+    "vite-plugin-commonjs": "^0.10.4",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {

code/frameworks/react-native-web-vite/src/preset.ts

@@ -4,6 +4,7 @@ import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
 import react from '@vitejs/plugin-react';
 import type { InlineConfig, PluginOption } from 'vite';
 import babel from 'vite-plugin-babel';
+import commonjs from 'vite-plugin-commonjs';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 import type { FrameworkOptions, StorybookConfig } from './types';
@@ -129,6 +130,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
       }),
       ...plugins,
       reactNativeWeb(),
+      commonjs(),
     ],
     optimizeDeps: {
       esbuildOptions: {

code/package.json

@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.1"
 }

code/renderers/html/template/cli/js/Page.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/html/template/cli/ts-3-8/Page.stories.ts

@@ -16,7 +16,7 @@ export default meta;
 
 export const LoggedOut: StoryObj = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/html/template/cli/ts-4-9/Page.stories.ts

@@ -16,7 +16,7 @@ export default meta;
 
 export const LoggedOut: StoryObj = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/preact/template/cli/Page.stories.jsx

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/react/template/cli/js/Page.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/react/template/cli/ts-3-8/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/react/template/cli/ts-4-9/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/svelte/template/cli/js/Page.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

code/renderers/vue3/template/cli/js/Page.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn = {
   render: () => ({
     components: {

code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts

@@ -21,7 +21,7 @@ const meta: Meta<typeof MyPage> = {
 export default meta;
 type Story = StoryObj<typeof MyPage>;
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }: any) => {
     const canvas = within(canvasElement);

code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts

@@ -21,7 +21,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }: any) => {
     const canvas = within(canvasElement);

code/yarn.lock

@@ -6974,6 +6974,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:^4.3.2"
     typescript: "npm:^5.3.2"
     vite-plugin-babel: "npm:^1.3.0"
+    vite-plugin-commonjs: "npm:^0.10.4"
     vite-tsconfig-paths: "npm:^5.1.4"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -29222,6 +29223,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-commonjs@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "vite-plugin-commonjs@npm:0.10.4"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    magic-string: "npm:^0.30.11"
+    vite-plugin-dynamic-import: "npm:^1.6.0"
+  checksum: 10c0/074e0d7a1e8f20d605f1a02c53867706639ea5a9aac8657e8d90442f13cf86154a6ebc65de1f05eb62e1a98523422d5025f3b7ccaabe88c486bec12b45e5d136
+  languageName: node
+  linkType: hard
+
+"vite-plugin-dynamic-import@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "vite-plugin-dynamic-import@npm:1.6.0"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    es-module-lexer: "npm:^1.5.4"
+    fast-glob: "npm:^3.3.2"
+    magic-string: "npm:^0.30.11"
+  checksum: 10c0/049f953b404157346e06a729eb055bc5b3630ac990bf36d52e6c44b1b223ac8e1f22fa1c44cadea55e7621366a0666439860fd4572f09c87daa45affd5dd15b6
+  languageName: node
+  linkType: hard
+
 "vite-plugin-inspect@npm:^0.8.5":
   version: 0.8.9
   resolution: "vite-plugin-inspect@npm:0.8.9"

docs/_snippets/addon-actions-action-function.md

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import Button from './button.component';
 
-const meta: Meta<Button> {
+const meta: Meta<Button> = {
   component: Button,
   args: {
     // 👇 Create an action that appears when the onClick event is fired
@@ -36,7 +36,7 @@ import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
 
-const meta {
+const meta = {
   component: Button,
   args: {
     // 👇 Create an action that appears when the onClick event is fired
@@ -54,7 +54,7 @@ import { action } from '@storybook/addon-actions';
 
 import Button from './Button';
 
-const meta: Meta<typeof Button> {
+const meta: Meta<typeof Button> = {
   component: Button,
   args: {
     // 👇 Create an action that appears when the onClick event is fired
@@ -81,7 +81,7 @@ export default {
 import type { Meta } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 
-const meta: Meta {
+const meta: Meta = {
   component: 'demo-button',
   args: {
     // 👇 Create an action that appears when the onClick event is fired

docs/_snippets/api-doc-block-canvas-parameter.md

@@ -20,7 +20,7 @@ export const Basic: Story = {
 ```
 
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
-export const Basic {
+export const Basic = {
   parameters: {
     docs: {
       canvas: { sourceState: 'shown' },