From 03264bd61d9e12f53bf258c13bbc21df41caa766 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 17 Dec 2024 10:22:46 +0100
Subject: [PATCH 1/2] Register event listeners before rendering test providers,
 in case they emit events on first render (which VTA does)

---
 code/core/src/manager/components/sidebar/SidebarBottom.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index 37a872810a6a..38efdae4f682 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -1,7 +1,7 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { styled } from '@storybook/core/theming';
-import { type API_FilterFunction, type API_StatusValue } from '@storybook/core/types';
+import { type API_FilterFunction } from '@storybook/core/types';
 
 import {
   TESTING_MODULE_CRASH_REPORT,
@@ -119,7 +119,8 @@ export const SidebarBottomBase = ({
     api.experimental_setFilter('sidebar-bottom-filter', filter);
   }, [api, hasWarnings, hasErrors, warningsActive, errorsActive]);
 
-  useEffect(() => {
+  // Register listeners before the first render
+  useLayoutEffect(() => {
     const onCrashReport = ({ providerId, ...details }: TestingModuleCrashReportPayload) => {
       api.updateTestProviderState(providerId, {
         error: { name: 'Crashed!', message: details.error.message },

From ceb8cc930c085f80bc00fb19c7676d5abb430862 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 17 Dec 2024 10:23:12 +0100
Subject: [PATCH 2/2] Use most recent VTA version

---
 code/package.json |  2 +-
 code/yarn.lock    | 42 ++++++------------------------------------
 2 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/code/package.json b/code/package.json
index 6d52c3061cf1..352c8e63875b 100644
--- a/code/package.json
+++ b/code/package.json
@@ -90,7 +90,7 @@
     "type-fest": "~2.19"
   },
   "dependencies": {
-    "@chromatic-com/storybook": "^3.2.0",
+    "@chromatic-com/storybook": "^3.2.2",
     "@happy-dom/global-registrator": "^14.12.0",
     "@nx/eslint": "20.2.2",
     "@nx/vite": "20.2.2",
diff --git a/code/yarn.lock b/code/yarn.lock
index 87e41b6b5a15..2e83b8e16192 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2532,21 +2532,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "@chromatic-com/storybook@npm:3.2.0"
+"@chromatic-com/storybook@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "@chromatic-com/storybook@npm:3.2.2"
   dependencies:
-    "@storybook/channels": "npm:^8.3.0"
-    "@storybook/telemetry": "npm:^8.3.0"
-    "@storybook/types": "npm:^8.3.0"
     chromatic: "npm:^11.15.0"
     filesize: "npm:^10.0.12"
     jsonfile: "npm:^6.1.0"
     react-confetti: "npm:^6.1.0"
     strip-ansi: "npm:^7.1.0"
   peerDependencies:
-    storybook: "*"
-  checksum: 10c0/59485e69a55df6b1998e19bf0e129fa1f9a86d3ae541f4dcb6f6dd945e7b9a6258ce75e244aaa73821039cef8c57424402a3c0bf63a66b4511a2ac0b5611103b
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10c0/7b8da1ddb399c804337ff28a28594b548392b7bead52f66615b98e201cdeb4d31184b9e355791ba5d0d8cfdd2bea7d38355ecd0058f26f4790f9a887107bde0f
   languageName: node
   linkType: hard
 
@@ -6037,15 +6034,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@npm:^8.3.0":
-  version: 8.3.6
-  resolution: "@storybook/channels@npm:8.3.6"
-  peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10c0/3c34ed2b03c60c6ed1160d9a0efdb836be892e333556848ff492c16ab6d92521207512670d42f69d681f521e50f130a00f692610a3ca63228a8d2b49be57f4fa
-  languageName: node
-  linkType: hard
-
 "@storybook/channels@workspace:deprecated/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:deprecated/channels"
@@ -7035,7 +7023,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/root@workspace:."
   dependencies:
-    "@chromatic-com/storybook": "npm:^3.2.0"
+    "@chromatic-com/storybook": "npm:^3.2.2"
     "@happy-dom/global-registrator": "npm:^14.12.0"
     "@nx/eslint": "npm:20.2.2"
     "@nx/vite": "npm:20.2.2"
@@ -7325,15 +7313,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/telemetry@npm:^8.3.0":
-  version: 8.3.6
-  resolution: "@storybook/telemetry@npm:8.3.6"
-  peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10c0/b4fd8d0e238335249aa82dea49bde56813e0c771e67dd7110fb9e038d1e2bd64aa03e76ee865ef6a7f0fd5220d02bd7bcf3273bb4c19403e3d527d9dd7a258d4
-  languageName: node
-  linkType: hard
-
 "@storybook/telemetry@workspace:deprecated/telemetry":
   version: 0.0.0-use.local
   resolution: "@storybook/telemetry@workspace:deprecated/telemetry"
@@ -7383,15 +7362,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/types@npm:^8.3.0":
-  version: 8.3.6
-  resolution: "@storybook/types@npm:8.3.6"
-  peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10c0/482f55e34877f9eb94a8ff4627a254f3b5442f91f13363e6837e3a9c220a369be1c6ce4652b870b7fa4e522c3365825651f9e04a21bda76b104a6c1f7435e274
-  languageName: node
-  linkType: hard
-
 "@storybook/types@workspace:*, @storybook/types@workspace:deprecated/types":
   version: 0.0.0-use.local
   resolution: "@storybook/types@workspace:deprecated/types"