Merge pull request #486 from storybookjs/release/0.19.0

Release 0.19.0

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import type { Preview } from '@storybook/react';
 import { isTestRunner } from './is-test-runner';
 
 const withSkippableTests = (StoryFn, { parameters }) => {
@@ -8,4 +9,9 @@ const withSkippableTests = (StoryFn, { parameters }) => {
   return StoryFn();
 };
 
-export const decorators = [withSkippableTests];
+const preview: Preview = {
+  tags: ['global-tag'],
+  decorators: [withSkippableTests],
+};
+
+export default preview;

.storybook/test-runner.ts

@@ -8,6 +8,9 @@ const skipSnapshots = process.env.SKIP_SNAPSHOTS === 'true';
 
 const config: TestRunnerConfig = {
   logLevel: 'verbose',
+  errorMessageFormatter: (message) => {
+    return message;
+  },
   tags: {
     exclude: ['exclude'],
     include: [],

README.md

@@ -220,7 +220,7 @@ module.exports = {
 
 ## Filtering tests (experimental)
 
-You might want to skip certain stories in the test-runner, run tests only against a subset of stories, or exclude certain stories entirely from your tests. This is possible via the `tags` annotation.
+You might want to skip certain stories in the test-runner, run tests only against a subset of stories, or exclude certain stories entirely from your tests. This is possible via the `tags` annotation. By default, the test-runner includes every story with the `"test"` tag. This tag is included by default in Storybook 8 for all stories, unless the user tells otherwise via [tag negation](https://storybook.js.org/docs/writing-stories/tags#removing-tags).
 
 This annotation can be part of a story, therefore only applying to it, or the component meta (the default export), which applies to all stories in the file:
 
@@ -729,6 +729,23 @@ const config: TestRunnerConfig = {
 export default config;
 ```
 
+#### errorMessageFormatter
+
+The `errorMessageFormatter` property defines a function that will pre-format the error messages before they get reported in the CLI:
+
+```ts
+// .storybook/test-runner.ts
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  errorMessageFormatter: (message) => {
+    // manipulate the error message as you like
+    return message;
+  },
+};
+export default config;
+```
+
 ### Utility functions
 
 For more specific use cases, the test runner provides utility functions that could be useful to you.

package.json

@@ -60,7 +60,7 @@
     "@storybook/csf": "^0.1.2",
     "@storybook/csf-tools": "^8.0.0",
     "@storybook/preview-api": "^8.0.0",
-    "@swc/core": "1.5.7",
+    "@swc/core": "^1.5.22",
     "@swc/jest": "^0.2.23",
     "expect-playwright": "^0.8.0",
     "jest": "^29.6.4",

src/csf/transformCsf.ts

@@ -2,7 +2,7 @@
 import { loadCsf } from '@storybook/csf-tools';
 import * as t from '@babel/types';
 import generate from '@babel/generator';
-import { toId, storyNameFromExport } from '@storybook/csf';
+import { toId, storyNameFromExport, combineTags } from '@storybook/csf';
 import dedent from 'ts-dedent';
 
 import { getTagOptions } from '../util/getTagOptions';
@@ -108,7 +108,8 @@ export const transformCsf = (
     beforeEachPrefixer,
     insertTestIfEmpty,
     makeTitle,
-  }: TransformOptions
+    previewAnnotations = { tags: [] },
+  }: TransformOptions & { previewAnnotations?: Record<string, any> }
 ) => {
   const { includeTags, excludeTags, skipTags } = getTagOptions();
 
@@ -126,7 +127,14 @@ export const transformCsf = (
         acc[key].play = annotations.play;
       }
 
-      acc[key].tags = csf._stories[key].tags || csf.meta?.tags || [];
+      acc[key].tags = combineTags(
+        'test',
+        'dev',
+        ...previewAnnotations.tags,
+        ...(csf.meta?.tags || []),
+        ...(csf._stories[key].tags || [])
+      );
+
       return acc;
     },
     {}

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) => {