Release 0.16.0

.github/workflows/tests.yml

@@ -19,8 +19,9 @@ jobs:
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
-      - name: Run jest tests
+      - name: Run unit tests
         run: |
+          yarn build
           yarn test --coverage
 
       - name: Install Playwright Browsers

.github/workflows/typecheck.yml

@@ -0,0 +1,21 @@
+name: Typecheck
+
+on: [push, pull_request]
+
+jobs:
+    typecheck:
+        runs-on: ubuntu-latest
+        steps:
+        - uses: actions/checkout@v2
+
+        - name: Use Node.js 18.x
+          uses: actions/setup-node@v1
+          with:
+            node-version: '18.x'
+
+        - name: Install dependencies
+          uses: bahmutov/npm-install@v1
+
+        - name: Type check
+          run: yarn tsc
+

.storybook/test-runner.ts

@@ -7,6 +7,7 @@ const customSnapshotsDir = `${process.cwd()}/${snapshotsDir}`;
 const skipSnapshots = process.env.SKIP_SNAPSHOTS === 'true';
 
 const config: TestRunnerConfig = {
+  logLevel: 'verbose',
   tags: {
     exclude: ['exclude'],
     include: [],
@@ -39,7 +40,7 @@ const config: TestRunnerConfig = {
     });
 
     const elementHandler = (await page.$('#root')) || (await page.$('#storybook-root'));
-    const innerHTML = await elementHandler.innerHTML();
+    const innerHTML = await elementHandler?.innerHTML();
     // HTML snapshot tests
     expect(innerHTML).toMatchSnapshot();
   },

MIGRATION.portable-stories.md

@@ -368,4 +368,4 @@ The examples above will give you the closest possible experience with the Storys
 
 ### 5 - Provide feedback
 
-We are looking for feedback on your experience and would appreciate it if you filled [this form](some-google-form-here) to help us shape our tooling in the right direction. Thank you so much!
+We are looking for feedback on your experience and would appreciate it if you filled [this form](https://forms.gle/jzcMr6cqmZZpH9Z5A) to help us shape our tooling in the right direction. Thank you so much!

MIGRATION.test-runner.md

@@ -224,4 +224,4 @@ module.exports = {
 
 ### Provide feedback
 
-We are looking for feedback on your experience and would appreciate it if you filled [this form](some-google-form-here) to help us shape our tooling in the right direction. Thank you so much!
+We are looking for feedback on your experience and would appreciate it if you filled [this form](https://forms.gle/jzcMr6cqmZZpH9Z5A) to help us shape our tooling in the right direction. Thank you so much!

README.md

@@ -36,6 +36,7 @@ Storybook test runner turns all of your stories into executable tests.
   - [prepare](#prepare)
   - [getHttpHeaders](#gethttpheaders)
   - [tags (experimental)](#tags-experimental)
+  - [logLevel](#loglevel)
   - [Utility functions](#utility-functions)
     - [getStoryContext](#getstorycontext)
     - [waitForPageReady](#waitforpageready)
@@ -705,6 +706,26 @@ export default config;
 
 `tags` are used for filtering your tests. Learn more [here](#filtering-tests-experimental).
 
+#### logLevel
+
+When tests fail and there were browser logs during the rendering of a story, the test-runner provides the logs alongside the error message. The `logLevel` property defines what kind of logs should be displayed:
+
+- **`info` (default):** Shows console logs, warnings, and errors.
+- **`warn`:** Shows only warnings and errors.
+- **`error`:** Displays only error messages.
+- **`verbose`:** Includes all console outputs, including debug information and stack traces.
+- **`none`:** Suppresses all log output.
+
+```ts
+// .storybook/test-runner.ts
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  logLevel: 'verbose',
+};
+export default config;
+```
+
 ### Utility functions
 
 For more specific use cases, the test runner provides utility functions that could be useful to you.

jest.config.js

@@ -1,3 +1,11 @@
 module.exports = {
   testMatch: ['**/*.test.ts'],
+  moduleNameMapper: {
+    '@storybook/test-runner/playwright/global-setup': '<rootDir>/playwright/global-setup',
+    '@storybook/test-runner/playwright/global-teardown': '<rootDir>/playwright/global-teardown',
+    '@storybook/test-runner/playwright/custom-environment':
+      '<rootDir>/playwright/custom-environment',
+    '@storybook/test-runner/playwright/jest-setup': '<rootDir>/playwright/jest-setup',
+    '@storybook/test-runner/playwright/transform': '<rootDir>/playwright/transform',
+  },
 };

package.json

@@ -53,7 +53,6 @@
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@jest/types": "^29.6.3",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
@@ -96,6 +95,7 @@
     "@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",
@@ -110,7 +110,7 @@
     "jest-circus": "^29.6.4",
     "jest-environment-node": "^29.6.4",
     "jest-junit": "^16.0.0",
-    "jest-playwright-preset": "^3.0.1",
+    "jest-playwright-preset": "^4.0.0",
     "jest-runner": "^29.6.4",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.0.0",

playwright/jest-setup.js

@@ -1,10 +1,4 @@
-const {
-  getTestRunnerConfig,
-  setPreVisit,
-  setPostVisit,
-  setupPage,
-  throwUncaughtPageError,
-} = require('../dist');
+const { getTestRunnerConfig, setPreVisit, setPostVisit, setupPage } = require('../dist');
 
 const testRunnerConfig = getTestRunnerConfig(process.env.STORYBOOK_CONFIG_DIR);
 if (testRunnerConfig) {
@@ -27,5 +21,4 @@ if (testRunnerConfig) {
 // If the transformed tests need a dependency, it has to be globally available
 // in order to work both in default (file transformation) and stories/index.json mode.
 globalThis.__sbSetupPage = setupPage;
-globalThis.__sbThrowUncaughtPageError = throwUncaughtPageError;
 globalThis.__sbCollectCoverage = process.env.STORYBOOK_COLLECT_COVERAGE === 'true';

src/config/jest-playwright.test.ts

@@ -0,0 +1,115 @@
+import { getJestConfig } from './jest-playwright';
+import path from 'path';
+
+describe('getJestConfig', () => {
+  it('returns the correct configuration 1', () => {
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig).toEqual({
+      rootDir: process.cwd(),
+      reporters: ['default'],
+      testMatch: [],
+      transform: {
+        '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
+          require.resolve('@storybook/test-runner/playwright/transform')
+        )}/transform.js`,
+        '^.+\\.[jt]sx?$': path.resolve('../test-runner/node_modules/@swc/jest'),
+      },
+      snapshotSerializers: [path.resolve('../test-runner/node_modules/jest-serializer-html')],
+      testEnvironmentOptions: {
+        'jest-playwright': {
+          browsers: undefined,
+          collectCoverage: false,
+          exitOnPageError: false,
+        },
+      },
+      watchPlugins: [
+        require.resolve('jest-watch-typeahead/filename'),
+        require.resolve('jest-watch-typeahead/testname'),
+      ],
+      watchPathIgnorePatterns: ['coverage', '.nyc_output', '.cache'],
+      roots: undefined,
+      runner: path.resolve('../test-runner/node_modules/jest-playwright-preset/runner.js'),
+      globalSetup: path.resolve('playwright/global-setup.js'),
+      globalTeardown: path.resolve('playwright/global-teardown.js'),
+      testEnvironment: path.resolve('playwright/custom-environment.js'),
+      setupFilesAfterEnv: [
+        path.resolve('playwright/jest-setup.js'),
+        path.resolve('../test-runner/node_modules/expect-playwright/lib'),
+        path.resolve('../test-runner/node_modules/jest-playwright-preset/lib/extends.js'),
+      ],
+    });
+  });
+
+  it('parses TEST_BROWSERS environment variable correctly', () => {
+    interface JestPlaywrightOptions {
+      browsers?: string[];
+      collectCoverage?: boolean;
+    }
+    process.env.TEST_BROWSERS = 'chromium, firefox, webkit';
+
+    const jestConfig: {
+      testEnvironmentOptions?: {
+        'jest-playwright'?: JestPlaywrightOptions;
+      };
+    } = getJestConfig();
+
+    expect(jestConfig.testEnvironmentOptions?.['jest-playwright']?.browsers as string[]).toEqual([
+      'chromium',
+      'firefox',
+      'webkit',
+    ]);
+  });
+
+  it('sets TEST_MATCH environment variable correctly', () => {
+    process.env.TEST_MATCH = '**/*.test.js';
+
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig.testMatch).toEqual(['**/*.test.js']);
+  });
+
+  it('returns the correct configuration 2', () => {
+    process.env.STORYBOOK_JUNIT = 'true';
+
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig.reporters).toEqual(['default', path.dirname(require.resolve('jest-junit'))]);
+    expect(jestConfig).toMatchObject({
+      rootDir: process.cwd(),
+      roots: undefined,
+      testMatch: ['**/*.test.js'],
+      transform: {
+        '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
+          require.resolve('@storybook/test-runner/playwright/transform')
+        )}/transform.js`,
+        '^.+\\.[jt]sx?$': path.dirname(require.resolve('@swc/jest')),
+      },
+      snapshotSerializers: [path.dirname(require.resolve('jest-serializer-html'))],
+      testEnvironmentOptions: {
+        'jest-playwright': {
+          browsers: ['chromium', 'firefox', 'webkit'],
+          collectCoverage: false,
+        },
+      },
+      watchPlugins: [
+        require.resolve('jest-watch-typeahead/filename'),
+        require.resolve('jest-watch-typeahead/testname'),
+      ],
+      watchPathIgnorePatterns: ['coverage', '.nyc_output', '.cache'],
+    });
+  });
+
+  it('returns the correct configuration 3', () => {
+    process.env.TEST_ROOT = 'test';
+    process.env.STORYBOOK_STORIES_PATTERN = '**/*.stories.tsx';
+
+    const jestConfig = getJestConfig();
+
+    expect(jestConfig).toMatchObject({
+      roots: ['test'],
+      reporters: ['default', path.resolve('../test-runner/node_modules/jest-junit')],
+      testMatch: ['**/*.test.js'],
+    });
+  });
+});

src/config/jest-playwright.ts

@@ -1,7 +1,8 @@
 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 TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
 
 /**
  * IMPORTANT NOTE:
@@ -15,7 +16,7 @@ const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH || '@storybook/t
  * This function does the same thing as `preset: 'jest-playwright-preset` but makes sure that the
  * necessary moving parts are all required within the correct path.
  * */
-const getJestPlaywrightConfig = () => {
+const getJestPlaywrightConfig = (): Config.InitialOptions => {
   const presetBasePath = path.dirname(
     require.resolve('jest-playwright-preset', {
       paths: [path.join(__dirname, '../node_modules')],
@@ -28,18 +29,18 @@ const getJestPlaywrightConfig = () => {
   );
   return {
     runner: path.join(presetBasePath, 'runner.js'),
-    globalSetup: require.resolve(TEST_RUNNER_PATH + '/playwright/global-setup.js'),
-    globalTeardown: require.resolve(TEST_RUNNER_PATH + '/playwright/global-teardown.js'),
-    testEnvironment: require.resolve(TEST_RUNNER_PATH + '/playwright/custom-environment.js'),
+    globalSetup: require.resolve(`${TEST_RUNNER_PATH}/playwright/global-setup.js`),
+    globalTeardown: require.resolve(`${TEST_RUNNER_PATH}/playwright/global-teardown.js`),
+    testEnvironment: require.resolve(`${TEST_RUNNER_PATH}/playwright/custom-environment.js`),
     setupFilesAfterEnv: [
-      require.resolve(TEST_RUNNER_PATH + '/playwright/jest-setup.js'),
+      require.resolve(`${TEST_RUNNER_PATH}/playwright/jest-setup.js`),
       expectPlaywrightPath,
       path.join(presetBasePath, 'lib', 'extends.js'),
     ],
   };
 };
 
-export const getJestConfig = () => {
+export const getJestConfig = (): Config.InitialOptions => {
   const {
     TEST_ROOT,
     TEST_MATCH,
@@ -69,23 +70,23 @@ export const getJestConfig = () => {
 
   const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
 
-  const testMatch = (STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';')) || [];
+  const testMatch = STORYBOOK_STORIES_PATTERN?.split(';') ?? [];
 
-  let config = {
+  const config: Config.InitialOptions = {
     rootDir: getProjectRoot(),
     roots: TEST_ROOT ? [TEST_ROOT] : undefined,
     reporters,
     testMatch,
     transform: {
       '^.+\\.(story|stories)\\.[jt]sx?$': require.resolve(
-        TEST_RUNNER_PATH + '/playwright/transform'
+        `${TEST_RUNNER_PATH}/playwright/transform`
       ),
       '^.+\\.[jt]sx?$': swcJestPath,
     },
     snapshotSerializers: [jestSerializerHtmlPath],
     testEnvironmentOptions: {
       'jest-playwright': {
-        browsers: TEST_BROWSERS.split(',')
+        browsers: TEST_BROWSERS?.split(',')
           .map((p) => p.trim().toLowerCase())
           .filter(Boolean),
         collectCoverage: STORYBOOK_COLLECT_COVERAGE === 'true',