Release 0.17.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,41 @@
+Closes #
+
+<!-- If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->
+
+<!--
+
+Thank you for contributing to Storybook! Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/contribute
+
+-->
+
+## What I did
+
+<!-- Briefly describe what your PR does -->
+
+## Checklist for Contributors
+
+#### Manual testing
+
+_This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!_
+
+### Documentation
+
+<!-- Please check (put an "x" inside the "[ ]") the applicable items below to indicate which documentation has been updated. -->
+
+- [ ] Add or update documentation reflecting your changes in this repository
+- [ ] Request documentation updates in the [test-runner docs website](https://storybook.js.org/docs/writing-tests/test-runner)
+
+<!-- Regarding requesting documentation updates, please notify the maintainers of this repo in this PR. -->
+
+## Checklist for Maintainers
+
+- [ ] Make sure this PR contains **one** of the labels below:
+   <details>
+     <summary>Available labels</summary>
+
+  - `skip-release`: Skip any releases, e.g., documentation only changes, CI config etc.
+  - `patch`: Upgrade patch version (e.g. 0.0.x)
+  - `minor`: Upgrade patch version (e.g. 0.x.0)
+  - `major`: Upgrade patch version (e.g. x.0.0)
+
+   </details>

.github/workflows/nightly.yml

@@ -34,7 +34,7 @@ jobs:
 
       - name: Upgrade to storybook@next
         run: |
-          npx storybook@next upgrade --prerelease --yes
+          npx storybook@next upgrade --yes
         env:
           YARN_ENABLE_IMMUTABLE_INSTALLS: false
 

.github/workflows/tests-extended.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x]
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 

.storybook/test-runner.ts

@@ -1,5 +1,5 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import { getStoryContext, waitForPageReady } from '../dist/playwright/hooks';
+import { getStoryContext, waitForPageReady } from '../dist';
 import type { TestRunnerConfig } from '../dist';
 
 const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';

README.md

@@ -47,6 +47,7 @@ Storybook test runner turns all of your stories into executable tests.
   - [DOM snapshot (HTML)](#dom-snapshot-html)
   - [Image snapshot](#image-snapshot)
 - [Troubleshooting](#troubleshooting)
+  - [Yarn PnP (Plug n' Play) support](#yarn-pnp-plug-n-play-support)
   - [React Native support](#react-native-support)
   - [The error output in the CLI is too short](#the-error-output-in-the-cli-is-too-short)
   - [The test runner seems flaky and keeps timing out](#the-test-runner-seems-flaky-and-keeps-timing-out)
@@ -91,7 +92,8 @@ Use the following table to use the correct version of this package, based on the
 
 | Test runner version | Storybook version |
 | ------------------- | ----------------- |
-| ^0.10.0             | ^7.0.0            |
+| ^0.17.0             | ^8.0.0            |
+| ~0.16.0             | ^7.0.0            |
 | ~0.9.4              | ^6.4.0            |
 
 ## Getting started
@@ -983,6 +985,19 @@ export default config;
 
 ## Troubleshooting
 
+#### Yarn PnP (Plug n' Play) support
+
+The Storybook test-runner relies on a library called [jest-playwright-preset](https://github.com/playwright-community/jest-playwright), of which does not seem to support PnP. As a result, the test-runner won't work out of the box with PnP, and you might have the following error:
+
+```
+PlaywrightError: jest-playwright-preset: Cannot find playwright package to use chromium
+```
+
+If that is the case, there are two potential solutions:
+
+1. Install `playwright` as a direct dependency. You might need to run `yarn playwright install` after that, so you install Playwright's browser binaries.
+2. Switch your package manager's linker mode to `node-modules`.
+
 #### React Native support
 
 The test-runner is web based and therefore won't work with `@storybook/react-native` directly. However, if you use the [React Native Web Storybook Addon](https://storybook.js.org/addons/%2540storybook/addon-react-native-web), you can run the test-runner against the web-based Storybook generated with that addon. In that case, things would work the same way.

package.json

@@ -14,8 +14,8 @@
     "type": "git",
     "url": "https://github.com/storybookjs/test-runner"
   },
-  "author": "shilman",
   "license": "MIT",
+  "author": "shilman",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -30,99 +30,100 @@
   ],
   "scripts": {
     "build": "tsup",
-    "build:watch": "tsup --watch",
-    "test": "jest",
-    "storybook": "storybook dev -p 6006",
-    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --quiet\"",
     "build-storybook": "storybook build",
+    "build:watch": "tsup --watch",
+    "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
+    "prepare": "husky install",
     "release": "yarn build && auto shipit",
+    "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --quiet\"",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest",
     "test-storybook": "node dist/test-storybook",
-    "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --failOnConsole --outputFile test-results.json",
-    "test-storybook:no-cache": "yarn test-storybook --no-cache",
-    "test-storybook:json": "yarn test-storybook --stories-json",
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook\"",
-    "test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
     "test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook --coverage\"",
+    "test-storybook:ci-failures": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"TEST_FAILURES=1 yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook:failures\"",
     "test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && SKIP_SNAPSHOTS=true yarn test-storybook:json\"",
-    "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
-    "prepare": "husky install"
+    "test-storybook:failures": "SKIP_SNAPSHOTS=true TEST_FAILURES=1 yarn test-storybook --json --failOnConsole --outputFile test-results.json",
+    "test-storybook:json": "yarn test-storybook --stories-json",
+    "test-storybook:no-cache": "yarn test-storybook --no-cache"
+  },
+  "lint-staged": {
+    "*.{ts,js,tsx,jsx,css,md}": "prettier --write"
+  },
+  "dependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/generator": "^7.22.5",
+    "@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.2",
+    "@storybook/csf-tools": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@swc/core": "^1.3.18",
+    "@swc/jest": "^0.2.23",
+    "expect-playwright": "^0.8.0",
+    "jest": "^29.6.4",
+    "jest-circus": "^29.6.4",
+    "jest-environment-node": "^29.6.4",
+    "jest-junit": "^16.0.0",
+    "jest-playwright-preset": "^4.0.0",
+    "jest-runner": "^29.6.4",
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^2.0.0",
+    "playwright": "^1.14.0"
   },
   "devDependencies": {
-    "@auto-it/released": "^11.0.1",
+    "@auto-it/released": "^11.1.1",
     "@babel/cli": "^7.12.1",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@storybook/addon-coverage": "^0.0.9",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@types/jest": "^29.0.0",
     "@types/node": "^16.4.1",
+    "@types/node-fetch": "^2.6.11",
     "@vitejs/plugin-react": "^4.0.3",
-    "auto": "^11.0.1",
+    "auto": "^11.1.1",
     "babel-jest": "^29.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
+    "can-bind-to-host": "^1.1.1",
+    "commander": "^9.0.0",
     "concurrently": "^7.0.0",
     "detect-package-manager": "^3.0.1",
+    "glob": "^10.2.2",
     "husky": "^8.0.0",
     "jest-image-snapshot": "^6.2.0",
     "lint-staged": "^13.0.3",
+    "node-fetch": "^2",
+    "pkg-up": "^5.0.0",
     "prettier": "^2.8.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "read-pkg-up": "^7.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.5.4",
-    "storybook": "^7.5.3",
+    "storybook": "^8.0.0",
+    "tempy": "^1.0.1",
+    "ts-dedent": "^2.0.0",
     "ts-jest": "^29.0.0",
     "tsup": "^6.5.0",
     "typescript": "~4.9.4",
     "vite": "^4.4.5",
     "wait-on": "^7.2.0"
   },
-  "lint-staged": {
-    "*.{ts,js,tsx,jsx,css,md}": "prettier --write"
+  "engines": {
+    "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/generator": "^7.22.5",
-    "@babel/template": "^7.22.5",
-    "@babel/types": "^7.22.5",
-    "@jest/types": "^29.6.3",
-    "@storybook/core-common": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@storybook/csf": "^0.1.1",
-    "@storybook/csf-tools": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@storybook/preview-api": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@swc/core": "^1.3.18",
-    "@swc/jest": "^0.2.23",
-    "can-bind-to-host": "^1.1.1",
-    "commander": "^9.0.0",
-    "expect-playwright": "^0.8.0",
-    "glob": "^10.2.2",
-    "jest": "^29.6.4",
-    "jest-circus": "^29.6.4",
-    "jest-environment-node": "^29.6.4",
-    "jest-junit": "^16.0.0",
-    "jest-playwright-preset": "^4.0.0",
-    "jest-runner": "^29.6.4",
-    "jest-serializer-html": "^7.1.0",
-    "jest-watch-typeahead": "^2.0.0",
-    "node-fetch": "^2",
-    "playwright": "^1.14.0",
-    "read-pkg-up": "^7.0.1",
-    "tempy": "^1.0.1",
-    "ts-dedent": "^2.0.0"
-  },
-  "engines": {
-    "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
-  },
   "auto": {
     "prereleaseBranches": [
       "next",

playwright/custom-environment.js

@@ -1,4 +1,4 @@
-const { setupPage } = require('../dist/setup-page');
+const { setupPage } = require('../dist');
 
 const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
 

playwright/test-runner-jest.config.js

@@ -1,4 +1,4 @@
-const { getJestConfig } = require('@storybook/test-runner');
+const { getJestConfig } = require('../dist');
 
 // The default Jest configuration comes from @storybook/test-runner
 const testRunnerConfig = getJestConfig();

playwright/transform.js

@@ -1,5 +1,5 @@
 const { transformSync: swcTransform } = require('@swc/core');
-const { transformPlaywright } = require('../dist/playwright/transformPlaywright');
+const { transformPlaywright } = require('../dist');
 
 module.exports = {
   process(src, filename) {

src/config/jest-playwright.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import { getProjectRoot } from '@storybook/core-common';
 import type { Config } from '@jest/types';
 
-const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
+const getTestRunnerPath = () => process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
 
 /**
  * IMPORTANT NOTE:
@@ -17,6 +17,7 @@ const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/t
  * necessary moving parts are all required within the correct path.
  * */
 const getJestPlaywrightConfig = (): Config.InitialOptions => {
+  const TEST_RUNNER_PATH = getTestRunnerPath();
   const presetBasePath = path.dirname(
     require.resolve('jest-playwright-preset', {
       paths: [path.join(__dirname, '../node_modules')],
@@ -71,6 +72,7 @@ export const getJestConfig = (): Config.InitialOptions => {
   const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
 
   const testMatch = STORYBOOK_STORIES_PATTERN?.split(';') ?? [];
+  const TEST_RUNNER_PATH = getTestRunnerPath();
 
   const config: Config.InitialOptions = {
     rootDir: getProjectRoot(),

src/csf/transformCsf.ts

@@ -165,7 +165,7 @@ export const transformCsf = (
         return makeDescribe(key, tests);
       }
     })
-    .filter(Boolean) as babel.types.Statement[];
+    .filter(Boolean) as t.Statement[];
 
   let result = '';
 
@@ -175,7 +175,7 @@ export const transformCsf = (
       csf.meta?.title as string,
       allTests,
       beforeEachPrefixer ? makeBeforeEach(beforeEachPrefixer) : undefined
-    ) as babel.types.Node;
+    );
     const { code: describeCode } = generate(describe, {});
     result = dedent`
       ${result}

src/index.ts

@@ -2,3 +2,4 @@ export * from './playwright/hooks';
 export * from './config/jest-playwright';
 export * from './setup-page';
 export * from './util/getTestRunnerConfig';
+export * from './playwright/transformPlaywright';

src/playwright/transformPlaywrightJson.ts

@@ -155,7 +155,7 @@ export const transformPlaywrightJson = (index: V3StoriesIndex | V4Index | Unsupp
               }),
             ]);
           });
-        const program = t.program([makeDescribe(stories[0].title, storyTests)]) as babel.types.Node;
+        const program = t.program([makeDescribe(stories[0].title, storyTests)]);
 
         const { code } = generate(program, {});
 

src/setup-page-script.ts

@@ -380,6 +380,11 @@ async function __test(storyId: string): Promise<any> {
         reject(new StorybookTestRunnerError(storyId, error.message, logs));
       },
 
+      unhandledErrorsWhilePlaying: ([error]: Error[]) => {
+        cleanup(listeners);
+        reject(new StorybookTestRunnerError(storyId, error.message, logs));
+      },
+
       storyMissing: (id: string) => {
         cleanup(listeners);
         if (id === storyId) {

src/setup-page.ts

@@ -1,5 +1,6 @@
 import type { Page, BrowserContext } from 'playwright';
 import readPackageUp, { NormalizedReadResult } from 'read-pkg-up';
+import { pkgUp } from 'pkg-up';
 import { PrepareContext } from './playwright/hooks';
 import { getTestRunnerConfig } from './util/getTestRunnerConfig';
 import { readFile } from 'node:fs/promises';
@@ -61,7 +62,13 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
   await page.exposeBinding('logToPage', (_, message) => console.log(message));
 
   const finalStorybookUrl = referenceURL ?? targetURL ?? '';
-  const scriptLocation = require.resolve(path.join(__dirname, 'setup-page-script.mjs'));
+  const testRunnerPackageLocation = await pkgUp({ cwd: __dirname });
+  if (!testRunnerPackageLocation) throw new Error('Could not find test-runner package location');
+  const scriptLocation = path.join(
+    path.dirname(testRunnerPackageLocation),
+    'dist',
+    'setup-page-script.mjs'
+  );
 
   // read the content of setup-page-script.mjs and replace the placeholders with the actual values
   const content = (await readFile(scriptLocation, 'utf-8'))