diff --git a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx
index cbafff62f5..d380a645ff 100644
--- a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import * as monaco from "monaco-editor";
-import { expect, fn, within } from "storybook/test";
+import { expect, fn, waitFor } from "storybook/test";
 import { MonacoEditor } from "./MonacoEditor";
 
 const meta: Meta<typeof MonacoEditor> = {
@@ -58,23 +58,26 @@ export const WithOnChangeHandler: Story = {
 	// Monaco's textarea does not receive or fire events directly. Instead, we
 	// have to interact with the editor's model and then assert that the
 	// onChange callback was called with the new value.
-	async play({ args, canvasElement }) {
-		const canvas = within(canvasElement);
-		const editor = canvas.getByRole("textbox");
+	async play({ args, canvas }) {
+		await waitFor(() => canvas.getByRole("textbox"));
 
 		// there's only one model in the story
+		await waitFor(() => expect(monaco.editor.getModels()).toHaveLength(1));
+
 		const model = monaco.editor.getModels()[0];
 
 		model.setValue("");
 
-		await expect(editor).toHaveValue("");
-		await expect(args.onChange).toHaveBeenCalledOnce();
-		await expect(args.onChange).toHaveBeenCalledWith("");
+		await waitFor(async () => {
+			await expect(args.onChange).toHaveBeenCalledOnce();
+			await expect(args.onChange).toHaveBeenCalledWith("");
+		});
 
 		model.setValue("fnord");
 
-		await expect(editor).toHaveValue("fnord");
-		await expect(args.onChange).toHaveBeenCalledTimes(2);
-		await expect(args.onChange).toHaveBeenLastCalledWith("fnord");
+		await waitFor(async () => {
+			await expect(args.onChange).toHaveBeenCalledTimes(2);
+			await expect(args.onChange).toHaveBeenLastCalledWith("fnord");
+		});
 	},
 };