Feat: Add errorMessageFormatter

.storybook/test-runner.ts

@@ -8,6 +8,10 @@ const skipSnapshots = process.env.SKIP_SNAPSHOTS === 'true';
 
 const config: TestRunnerConfig = {
   logLevel: 'verbose',
+  errorMessageFormatter: (error) => {
+    // DO NOT MERGE WITH THIS CHANGE
+    return 'FORMATTED! ' + error.substring(0, 10);
+  },
   tags: {
     exclude: ['exclude'],
     include: [],

package.json

@@ -119,6 +119,9 @@
   "engines": {
     "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
   },
+  "resolutions": {
+    "@babel/types": "7.23.6"
+  },
   "publishConfig": {
     "access": "public"
   },

src/playwright/hooks.ts

@@ -63,6 +63,11 @@ export interface TestRunnerConfig {
    * @default 'info'
    */
   logLevel?: 'info' | 'warn' | 'error' | 'verbose' | 'none';
+
+  /**
+   * Defines a custom function to process the error message. Useful to sanitize error messages or to add additional information.
+   */
+  errorMessageFormatter?: (error: string) => string;
 }
 
 export const setPreVisit = (preVisit: TestHook) => {

src/playwright/transformPlaywrightJson.ts

@@ -120,7 +120,7 @@ export const transformPlaywrightJson = (index: V3StoriesIndex | V4Index | Unsupp
       Object.values((index as V3StoriesIndex).stories)
     );
     titleIdToEntries = v3TitleMapToV4TitleMap(titleIdToStories);
-  // v4 and v5 are pretty much similar, so we process it in the same way
+    // v4 and v5 are pretty much similar, so we process it in the same way
   } else if (index.v === 4 || index.v === 5) {
     // TODO: Once Storybook 8.0 is released, we should only support v4 and higher
     titleIdToEntries = groupByTitleId<V4Entry>(Object.values((index as V4Index).entries));

src/setup-page-script.ts

@@ -31,6 +31,7 @@ const TEST_RUNNER_DEBUG_PRINT_LIMIT = parseInt('{{debugPrintLimit}}', 10);
 declare global {
   // this is defined in setup-page.ts and can be used for logging from the browser to node, helpful for debugging
   var logToPage: (message: string) => void;
+  var getFormattedMessage: (message: string) => Promise<string>;
 }
 
 // Type definitions for function parameters and return types
@@ -205,21 +206,38 @@ function addToUserAgent(extra: string): void {
 
 // Custom error class
 class StorybookTestRunnerError extends Error {
-  constructor(storyId: string, errorMessage: string, logs: string[] = []) {
+  constructor(
+    storyId: string,
+    errorMessage: string,
+    logs: string[] = [],
+    isMessageFormatted: boolean = false
+  ) {
     super(errorMessage);
     this.name = 'StorybookTestRunnerError';
+    this.message = isMessageFormatted
+      ? errorMessage
+      : StorybookTestRunnerError.buildErrorMessage(storyId, errorMessage, logs);
+  }
+
+  public static buildErrorMessage(
+    storyId: string,
+    errorMessage: string,
+    logs: string[] = []
+  ): string {
     const storyUrl = `${TEST_RUNNER_STORYBOOK_URL}?path=/story/${storyId}`;
     const finalStoryUrl = `${storyUrl}&addonPanel=storybook/interactions/panel`;
     const separator = '\n\n--------------------------------------------------';
     // The original error message will also be collected in the logs, so we filter it to avoid duplication
-    const finalLogs = logs.filter((err) => !err.includes(errorMessage));
+    const finalLogs = logs.filter((err: string) => !err.includes(errorMessage));
     const extraLogs =
       finalLogs.length > 0 ? separator + '\n\nBrowser logs:\n\n' + finalLogs.join('\n\n') : '';
 
-    this.message = `\nAn error occurred in the following story. Access the link for full output:\n${finalStoryUrl}\n\nMessage:\n ${truncate(
+    const message = `\nAn error occurred in the following story. Access the link for full output:\n${finalStoryUrl}\n\nMessage:\n ${truncate(
       errorMessage,
       TEST_RUNNER_DEBUG_PRINT_LIMIT
     )}\n${extraLogs}`;
+
+    return message;
   }
 }
 
@@ -377,7 +395,16 @@ async function __test(storyId: string): Promise<any> {
 
       playFunctionThrewException: (error: Error) => {
         cleanup(listeners);
-        reject(new StorybookTestRunnerError(storyId, error.message, logs));
+
+        const errorMessage = StorybookTestRunnerError.buildErrorMessage(
+          storyId,
+          error.message,
+          logs
+        );
+
+        getFormattedMessage(errorMessage).then((message) => {
+          reject(new StorybookTestRunnerError(storyId, message, logs, true));
+        });
       },
 
       unhandledErrorsWhilePlaying: ([error]: Error[]) => {

src/setup-page.ts

@@ -61,6 +61,14 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
   // if we ever want to log something from the browser to node
   await page.exposeBinding('logToPage', (_, message) => console.log(message));
 
+  await page.exposeBinding('getFormattedMessage', (_, message: string) => {
+    if (testRunnerConfig.errorMessageFormatter) {
+      return testRunnerConfig.errorMessageFormatter(message);
+    }
+
+    return message;
+  });
+
   const finalStorybookUrl = referenceURL ?? targetURL ?? '';
   const testRunnerPackageLocation = await pkgUp({ cwd: __dirname });
   if (!testRunnerPackageLocation) throw new Error('Could not find test-runner package location');

stories/atoms/Button.stories.tsx

@@ -124,7 +124,8 @@ export const WithLoaders = {
     const canvas = within(canvasElement);
     const todoItem = await canvas.findByText('Todo: delectus aut autem');
     await userEvent.click(todoItem);
-    await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
+    // DO NOT MERGE WITH THIS CHANGE
+    await expect(args.onSubmit).not.toHaveBeenCalledWith('delectus aut autem');
   },
 };
 

yarn.lock

@@ -437,10 +437,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.24.1":
-  version: 7.24.1
-  resolution: "@babel/helper-string-parser@npm:7.24.1"
-  checksum: 8404e865b06013979a12406aab4c0e8d2e377199deec09dfe9f57b833b0c9ce7b6e8c1c553f2da8d0bcd240c5005bd7a269f4fef0d628aeb7d5fe035c436fb67
+"@babel/helper-string-parser@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/helper-string-parser@npm:7.23.4"
+  checksum: c0641144cf1a7e7dc93f3d5f16d5327465b6cf5d036b48be61ecba41e1eece161b48f46b7f960951b67f8c3533ce506b16dece576baef4d8b3b49f8c65410f90
   languageName: node
   linkType: hard
 
@@ -1685,14 +1685,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
-  version: 7.24.5
-  resolution: "@babel/types@npm:7.24.5"
+"@babel/types@npm:7.23.6":
+  version: 7.23.6
+  resolution: "@babel/types@npm:7.23.6"
   dependencies:
-    "@babel/helper-string-parser": ^7.24.1
-    "@babel/helper-validator-identifier": ^7.24.5
+    "@babel/helper-string-parser": ^7.23.4
+    "@babel/helper-validator-identifier": ^7.22.20
     to-fast-properties: ^2.0.0
-  checksum: 8eeeacd996593b176e649ee49d8dc3f26f9bb6aa1e3b592030e61a0e58ea010fb018dccc51e5314c8139409ea6cbab02e29b33e674e1f6962d8e24c52da6375b
+  checksum: 68187dbec0d637f79bc96263ac95ec8b06d424396678e7e225492be866414ce28ebc918a75354d4c28659be6efe30020b4f0f6df81cc418a2d30645b690a8de0
   languageName: node
   linkType: hard