@storybook/svelte 9.0.0-beta.9 → 9.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-rc.1",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
@@ -69,7 +69,7 @@
     "vite": "^6.2.5"
   },
   "peerDependencies": {
-    "storybook": "^9.0.0-beta.9",
+    "storybook": "^9.0.0-rc.1",
     "svelte": "^5.0.0"
   },
   "engines": {

package/template/stories/args.stories.js

@@ -5,7 +5,7 @@ import {
 } from 'storybook/internal/core-events';
 
 import { addons } from 'storybook/preview-api';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { expect, userEvent, waitFor } from 'storybook/test';
 
 import Button from './Button.svelte';
 
@@ -15,51 +15,53 @@ export default {
 };
 
 export const UpdatingArgs = {
-  play: async ({ canvasElement, id, step }) => {
-    const canvas = await within(canvasElement);
+  play: async ({ canvas, id, step }) => {
     const channel = addons.getChannel();
 
     await step('Reset story args', async () => {
       // Just to ensure the story is always in a clean state from the beginning, not really part of the test
-      await channel.emit(RESET_STORY_ARGS, { storyId: id });
+      channel.emit(RESET_STORY_ARGS, { storyId: id });
       await new Promise((resolve) => {
         channel.once(STORY_RENDERED, resolve);
       });
-      await expect(await canvas.getByRole('button')).toHaveTextContent('You clicked: 0');
+      await waitFor(async () => {
+        await expect(canvas.getByRole('button')).toHaveTextContent('You clicked: 0');
+      });
     });
 
-    const button = await canvas.getByRole('button');
     await step('Change state', async () => {
-      await userEvent.click(button);
-
+      await userEvent.click(canvas.getByRole('button'));
       await waitFor(async () => {
-        await expect(button).toHaveTextContent('You clicked: 1');
+        await expect(canvas.getByRole('button')).toHaveTextContent('You clicked: 1');
       });
     });
 
     await step("Update story args with { text: 'Changed' }", async () => {
-      await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { text: 'Changed' } });
+      channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { text: 'Changed' } });
       await new Promise((resolve) => {
         channel.once(STORY_RENDERED, resolve);
       });
-      await expect(button).toHaveTextContent('Changed: 1');
+      await waitFor(async () => {
+        await expect(canvas.getByRole('button')).toHaveTextContent('Changed: 1');
+      });
     });
   },
 };
 
 export const RemountOnResetStoryArgs = {
   play: async (playContext) => {
-    const { canvas, id, step } = playContext;
     await UpdatingArgs.play(playContext);
 
     const channel = addons.getChannel();
+    const { canvas, id, step } = playContext;
 
     // expect that all state and args are reset after RESET_STORY_ARGS because Svelte needs to remount the component
     // most other renderers would have 'You clicked: 1' here because they don't remount the component
     // if this doesn't fully remount it would be 'undefined: 1' because undefined args are used as is in Svelte, and the state is kept
     await step('Reset story args', () => channel.emit(RESET_STORY_ARGS, { storyId: id }));
-    await waitFor(async () =>
-      expect(await canvas.getByRole('button')).toHaveTextContent('You clicked: 0')
-    );
+
+    await waitFor(async () => {
+      await expect(canvas.getByRole('button')).toHaveTextContent('You clicked: 0');
+    });
   },
 };