Merge pull request #518 from storybookjs/release/v0.20.0

Release 0.20.0

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
 
       - name: Create Release
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
           yarn release

.yarnrc.yml

@@ -1,5 +1,9 @@
-enableTelemetry: 0
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+enableTelemetry: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

README.md

@@ -37,6 +37,7 @@ Storybook test runner turns all of your stories into executable tests.
   - [getHttpHeaders](#gethttpheaders)
   - [tags (experimental)](#tags-experimental)
   - [logLevel](#loglevel)
+  - [errorMessageFormatter](#errormessageformatter)
   - [Utility functions](#utility-functions)
     - [getStoryContext](#getstorycontext)
     - [waitForPageReady](#waitforpageready)
@@ -92,7 +93,8 @@ Use the following table to use the correct version of this package, based on the
 
 | Test runner version | Storybook version |
 | ------------------- | ----------------- |
-| ^0.17.0             | ^8.0.0            |
+| ^0.19.0             | ^8.2.0            |
+| ~0.17.0             | ^8.0.0            |
 | ~0.16.0             | ^7.0.0            |
 | ~0.9.4              | ^6.4.0            |
 
@@ -220,28 +222,35 @@ 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. 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).
+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:
+This annotation can be part of a story, therefore only applying to that story, or the component meta (the default export), which applies to all stories in the file:
 
 ```ts
 const meta = {
   component: Button,
-  tags: ['design', 'test-only'],
+  tags: ['atom'],
 };
 export default meta;
 
-// will inherit tags from meta with value ['design', 'test-only']
+// will inherit tags from project and meta to be ['dev', 'test', 'atom']
 export const Primary = {};
 
 export const Secondary = {
-  // will override tags to be just ['skip']
-  tags: ['skip'],
+  // will combine with project and meta tags to be ['dev', 'test', 'atom', 'design']
+  tags: ['design'],
+};
+
+export const Tertiary = {
+  // will combine with project and meta tags to be ['dev', 'atom']
+  tags: ['!test'],
 };
 ```
 
 > **Note**
-> You can't import constants from another file and use them to define tags in your stories. The tags in your stories or meta **have to be** defined inline, as an array of strings. This is a limitation due to Storybook's static analysis.
+> You can't import constants from another file and use them to define tags in your stories. The tags in your stories or meta **must be** defined inline, as an array of strings. This is a restriction due to Storybook's static analysis.
+
+For more information on how tags combine (and can be selectively removed), please see the [official docs](https://storybook.js.org/docs/writing-stories/tags).
 
 Once your stories have your own custom tags, you can filter them via the [tags property](#tags-experimental) in your test-runner configuration file. You can also use the CLI flags `--includeTags`, `--excludeTags` or `--skipTags` for the same purpose. The CLI flags will take precedence over the tags in the test-runner config, therefore overriding them.
 
@@ -699,7 +708,7 @@ import type { TestRunnerConfig } from '@storybook/test-runner';
 
 const config: TestRunnerConfig = {
   tags: {
-    include: [], // string array, e.g. ['test-only']
+    include: [], // string array, e.g. ['test', 'design'] - by default, the value will be ['test']
     exclude: [], // string array, e.g. ['design', 'docs-only']
     skip: [], // string array, e.g. ['design']
   },

package.json

@@ -56,10 +56,7 @@
     "@babel/template": "^7.22.5",
     "@babel/types": "^7.22.5",
     "@jest/types": "^29.6.3",
-    "@storybook/core-common": "^8.0.0",
     "@storybook/csf": "^0.1.11",
-    "@storybook/csf-tools": "^8.0.0",
-    "@storybook/preview-api": "^8.0.0",
     "@swc/core": "^1.5.22",
     "@swc/jest": "^0.2.23",
     "expect-playwright": "^0.8.0",
@@ -116,6 +113,9 @@
     "vite": "^4.4.5",
     "wait-on": "^7.2.0"
   },
+  "peerDependencies": {
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+  },
   "engines": {
     "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
   },
@@ -139,5 +139,6 @@
       "react-native"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
-  }
+  },
+  "packageManager": "yarn@4.5.1"
 }

src/config/jest-playwright.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { getProjectRoot } from '@storybook/core-common';
+import { getProjectRoot } from 'storybook/internal/common';
 import type { Config } from '@jest/types';
 
 const getTestRunnerPath = () => process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';

src/csf/__snapshots__/transformCsf.test.ts.snap

@@ -29,12 +29,25 @@ if (!require.main) {
           if (globalThis.__sbPreVisit) {
             await globalThis.__sbPreVisit(page, context);
           }
-          const result = await page.evaluate(({
-            id,
-            hasPlayFn
-          }) => __test(id, hasPlayFn), {
-            id: "button--primary"
-          });
+          let result;
+          try {
+            result = await page.evaluate(({
+              id,
+              hasPlayFn
+            }) => __test(id, hasPlayFn), {
+              id: "button--primary"
+            });
+          } catch (err) {
+            if (err.toString().includes('Execution context was destroyed')) {
+              throw err;
+            } else {
+              await globalThis.__sbPostVisit(page, {
+                ...context,
+                hasFailure: true
+              });
+              throw err;
+            }
+          }
           if (globalThis.__sbPostVisit) {
             await globalThis.__sbPostVisit(page, context);
           }
@@ -96,12 +109,25 @@ if (!require.main) {
           if (globalThis.__sbPreVisit) {
             await globalThis.__sbPreVisit(page, context);
           }
-          const result = await page.evaluate(({
-            id,
-            hasPlayFn
-          }) => __test(id, hasPlayFn), {
-            id: "button--primary"
-          });
+          let result;
+          try {
+            result = await page.evaluate(({
+              id,
+              hasPlayFn
+            }) => __test(id, hasPlayFn), {
+              id: "button--primary"
+            });
+          } catch (err) {
+            if (err.toString().includes('Execution context was destroyed')) {
+              throw err;
+            } else {
+              await globalThis.__sbPostVisit(page, {
+                ...context,
+                hasFailure: true
+              });
+              throw err;
+            }
+          }
           if (globalThis.__sbPostVisit) {
             await globalThis.__sbPostVisit(page, context);
           }
@@ -149,12 +175,25 @@ if (!require.main) {
           if (globalThis.__sbPreVisit) {
             await globalThis.__sbPreVisit(page, context);
           }
-          const result = await page.evaluate(({
-            id,
-            hasPlayFn
-          }) => __test(id, hasPlayFn), {
-            id: "button--primary"
-          });
+          let result;
+          try {
+            result = await page.evaluate(({
+              id,
+              hasPlayFn
+            }) => __test(id, hasPlayFn), {
+              id: "button--primary"
+            });
+          } catch (err) {
+            if (err.toString().includes('Execution context was destroyed')) {
+              throw err;
+            } else {
+              await globalThis.__sbPostVisit(page, {
+                ...context,
+                hasFailure: true
+              });
+              throw err;
+            }
+          }
           if (globalThis.__sbPostVisit) {
             await globalThis.__sbPostVisit(page, context);
           }

src/csf/transformCsf.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-underscore-dangle */
-import { loadCsf } from '@storybook/csf-tools';
+import { toId, storyNameFromExport, combineTags } from '@storybook/csf';
+import { loadCsf } from 'storybook/internal/csf-tools';
 import * as t from '@babel/types';
 import generate from '@babel/generator';
-import { toId, storyNameFromExport, combineTags } from '@storybook/csf';
 import dedent from 'ts-dedent';
 
 import { getTagOptions } from '../util/getTagOptions';
@@ -124,6 +124,7 @@ export const transformCsf = (
       const annotations = csf._storyAnnotations[key];
       acc[key] = {};
       if (annotations?.play) {
+        // @ts-expect-error type mismatch – check later
         acc[key].play = annotations.play;
       }
 

src/playwright/hooks.ts

@@ -5,6 +5,7 @@ export type TestContext = {
   id: string;
   title: string;
   name: string;
+  hasFailure?: boolean;
 };
 
 export type PrepareContext = {