BREAKING: Change the eject behavior and add templates

.github/workflows/tests-extended.yml

@@ -7,11 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}

.github/workflows/tests.yml

@@ -7,11 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
@@ -21,11 +21,11 @@ jobs:
 
       - name: Run jest tests
         run: |
+          yarn build
           yarn test --coverage
 
       - name: Run test runner
         run: |
-          yarn build
           yarn test-storybook:ci-coverage
 
       - name: Generate code coverage

README.md

@@ -152,7 +152,7 @@ Usage: test-storybook [options]
 | `--clearCache`                    | Deletes the Jest cache directory and then exits without running tests <br/>`test-storybook --clearCache`                                                                      |
 | `--verbose`                       | Display individual test results with the test suite hierarchy <br/>`test-storybook --verbose`                                                                                 |
 | `-u`, `--updateSnapshot`          | Use this flag to re-record every snapshot that fails during this test run <br/>`test-storybook -u`                                                                            |
-| `--eject`                         | Creates a local configuration file to override defaults of the test-runner <br/>`test-storybook --eject`                                                                      |
+| `--eject`                         | Creates local configuration files to override defaults of the test-runner <br/>`test-storybook --eject`                                                                       |
 | `--json`                          | Prints the test results in JSON. This mode will send all other test output and user messages to stderr. <br/>`test-storybook --json`                                          |
 | `--outputFile`                    | Write test results to a file when the --json option is also specified. <br/>`test-storybook --json --outputFile results.json`                                                 |
 | `--junit`                         | Indicates that test information should be reported in a junit file. <br/>`test-storybook --**junit**`                                                                         |
@@ -162,10 +162,10 @@ Usage: test-storybook [options]
 
 ## Ejecting configuration
 
-The test runner is based on [Jest](https://jestjs.io/) and will accept most of the [CLI options](https://jestjs.io/docs/cli) that Jest does, like `--watch`, `--watchAll`, `--maxWorkers`, etc. It works out of the box, but if you want better control over its configuration, you can eject its configuration by running `test-storybook --eject` to create a local `test-runner-jest.config.js` file in the root folder of your project. This file will be used by the test runner.
+The test runner is based on [Jest](https://jestjs.io/) and will accept most of the [CLI options](https://jestjs.io/docs/cli) that Jest does, like `--watch`, `--watchAll`, `--maxWorkers`, etc. It works out of the box, but if you want better control over its configuration, you can eject its configuration by running `test-storybook --eject` to create local `test-runner-jest.config.js`, `custom-environment.js`, `global-setup.js`, `global-teardown.js`, `jest-setup.js` files in the root folder of your project. This file will be used by the test runner.
 
 > **Note**
-> The `test-runner-jest.config.js` file can be placed inside of your Storybook config dir as well. If you pass the `--config-dir` option, the test-runner will look for the config file there as well.
+> The local created files can be placed inside of your Storybook config dir as well. If you pass the `--config-dir` option, the test-runner will look for the config file there as well.
 
 The configuration file will accept options for two runners:
 
@@ -753,8 +753,7 @@ If you use [`@storybook/addon-a11y`](https://storybook.js.org/addons/@storybook/
 
 ```js
 // .storybook/test-runner.js
-const { getStoryContext } = require('@storybook/test-runner');
-const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
+const { getStoryContext, injectAxe, checkA11y, configureAxe } = require('@storybook/test-runner');
 
 module.exports = {
   async preRender(page, context) {

jest.config.js

@@ -1,11 +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',
+    '@storybook/test-runner/dist/templates/global-setup': '<rootDir>/dist/templates/global-setup',
+    '@storybook/test-runner/dist/templates/global-teardown':
+      '<rootDir>/dist/templates/global-teardown',
+    '@storybook/test-runner/dist/templates/custom-environment':
+      '<rootDir>/dist/templates/custom-environment',
+    '@storybook/test-runner/dist/templates/jest-setup': '<rootDir>/dist/templates/jest-setup',
   },
 };

package.json

@@ -25,11 +25,22 @@
   "files": [
     "dist",
     "README.md",
-    "playwright",
     "*.d.ts"
   ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && ts-node ./scripts/copy-templates.ts",
     "build:watch": "tsup --watch",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
@@ -60,6 +71,7 @@
     "@storybook/react": "^7.3.0",
     "@storybook/react-vite": "^7.3.0",
     "@storybook/testing-library": "^0.2.0",
+    "@types/fs-extra": "^11.0.1",
     "@types/jest": "^29.0.0",
     "@types/node": "^16.4.1",
     "@vitejs/plugin-react": "^4.0.3",
@@ -70,15 +82,16 @@
     "concurrently": "^7.0.0",
     "detect-package-manager": "^3.0.1",
     "husky": "^8.0.0",
-    "jest-image-snapshot": "^6.2.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.8.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "replace-in-file": "^7.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.5.4",
     "storybook": "^7.3.0",
     "ts-jest": "^29.0.0",
+    "ts-node": "^10.5.0",
     "tsup": "^6.5.0",
     "typescript": "~4.9.4",
     "vite": "^4.4.5",
@@ -102,13 +115,18 @@
     "@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",
+    "@types/jest-image-snapshot": "^5.1.0",
+    "axe-playwright": "^1.2.3",
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "expect-playwright": "^0.8.0",
+    "find-up": "^5.0.0",
+    "fs-extra": "^11.1.1",
     "glob": "^10.2.2",
     "jest": "^29.6.4",
     "jest-circus": "^29.6.4",
     "jest-environment-node": "^29.6.4",
+    "jest-image-snapshot": "^6.2.0",
     "jest-junit": "^16.0.0",
     "jest-playwright-preset": "^3.0.1",
     "jest-runner": "^29.6.4",

scripts/copy-templates.ts

@@ -0,0 +1,22 @@
+import fs from 'fs-extra';
+import replace from 'replace-in-file';
+
+const srcDir = 'src/templates';
+const destDir = 'dist/templateFiles';
+
+fs.ensureDirSync(destDir);
+fs.copySync(srcDir, destDir);
+console.log(`Successfully copied ${srcDir} to ${destDir}`);
+
+const options = {
+  files: `${destDir}/**/*`,
+  from: '../index',
+  to: '@storybook/test-runner',
+};
+
+try {
+  const results = replace.sync(options);
+  console.log(`Replaced ${results.length} instances of '${options.from}' with '${options.to}'`);
+} catch (error) {
+  console.error('Error occurred:', error);
+}

src/config/jest-playwright.test.ts

@@ -10,9 +10,7 @@ describe('getJestConfig', () => {
       reporters: ['default'],
       testMatch: [],
       transform: {
-        '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
-          require.resolve('@storybook/test-runner/playwright/transform')
-        )}/transform.js`,
+        '^.+\\.(story|stories)\\.[jt]sx?$': '@storybook/test-runner/dist/templates/transform',
         '^.+\\.[jt]sx?$': path.resolve('../test-runner/node_modules/@swc/jest'),
       },
       snapshotSerializers: [path.resolve('../test-runner/node_modules/jest-serializer-html')],
@@ -29,11 +27,11 @@ describe('getJestConfig', () => {
       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'),
+      globalSetup: path.resolve('dist/templates/global-setup.js'),
+      globalTeardown: path.resolve('dist/templates/global-teardown.js'),
+      testEnvironment: path.resolve('dist/templates/custom-environment.js'),
       setupFilesAfterEnv: [
-        path.resolve('playwright/jest-setup.js'),
+        path.resolve('dist/templates/jest-setup.js'),
         path.resolve('../test-runner/node_modules/expect-playwright/lib'),
         path.resolve('../test-runner/node_modules/jest-playwright-preset/lib/extends.js'),
       ],
@@ -79,9 +77,7 @@ describe('getJestConfig', () => {
       roots: undefined,
       testMatch: ['**/*.test.js'],
       transform: {
-        '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
-          require.resolve('@storybook/test-runner/playwright/transform')
-        )}/transform.js`,
+        '^.+\\.(story|stories)\\.[jt]sx?$': '@storybook/test-runner/dist/templates/transform',
         '^.+\\.[jt]sx?$': path.dirname(require.resolve('@swc/jest')),
       },
       snapshotSerializers: [path.dirname(require.resolve('jest-serializer-html'))],

src/config/jest-playwright.ts

@@ -29,11 +29,11 @@ const getJestPlaywrightConfig = (): Config.InitialOptions => {
   );
   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}/dist/templates/global-setup`),
+    globalTeardown: require.resolve(`${TEST_RUNNER_PATH}/dist/templates/global-teardown`),
+    testEnvironment: require.resolve(`${TEST_RUNNER_PATH}/dist/templates/custom-environment`),
     setupFilesAfterEnv: [
-      require.resolve(`${TEST_RUNNER_PATH}/playwright/jest-setup.js`),
+      require.resolve(`${TEST_RUNNER_PATH}/dist/templates/jest-setup`),
       expectPlaywrightPath,
       path.join(presetBasePath, 'lib', 'extends.js'),
     ],
@@ -78,9 +78,7 @@ export const getJestConfig = (): Config.InitialOptions => {
     reporters,
     testMatch,
     transform: {
-      '^.+\\.(story|stories)\\.[jt]sx?$': require.resolve(
-        `${TEST_RUNNER_PATH}/playwright/transform`
-      ),
+      '^.+\\.(story|stories)\\.[jt]sx?$': '@storybook/test-runner/dist/templates/transform',
       '^.+\\.[jt]sx?$': swcJestPath,
     },
     snapshotSerializers: [jestSerializerHtmlPath],

src/index.ts

@@ -1,4 +1,40 @@
+import type { Config } from '@jest/types';
+
 export * from './playwright/hooks';
 export * from './config/jest-playwright';
 export * from './setup-page';
 export * from './util/getTestRunnerConfig';
+
+export {
+  toMatchImageSnapshot,
+  configureToMatchImageSnapshot,
+  updateSnapshotState,
+} from 'jest-image-snapshot';
+
+type JestConfig = Config.InitialOptions;
+type GlobalConfig = Config.GlobalConfig;
+
+export { type JestConfig, type GlobalConfig };
+
+export {
+  injectAxe,
+  configureAxe,
+  getAxeResults,
+  getViolations,
+  reportViolations,
+  checkA11y,
+  DefaultTerminalReporter,
+} from 'axe-playwright';
+
+export const PlaywrightEnvironmentModule = require.resolve(
+  'jest-playwright-preset/lib/PlaywrightEnvironment'
+);
+
+export { transformSync as swcTransform } from '@swc/core';
+
+export { type Event } from 'jest-circus';
+
+export {
+  globalTeardown as playwrightGlobalTeardown,
+  globalSetup as playwrightGlobalSetup,
+} from 'jest-playwright-preset';

src/playwright/hooks.ts

@@ -1,5 +1,6 @@
 import type { BrowserContext, Page } from 'playwright';
 import type { StoryContext } from '@storybook/csf';
+import { transformPlaywright } from './transformPlaywright';
 
 export type TestContext = {
   id: string;
@@ -53,3 +54,5 @@ export const waitForPageReady = async (page: Page) => {
   await page.waitForLoadState('networkidle');
   await page.evaluate(() => document.fonts.ready);
 };
+
+export { transformPlaywright };

playwright/custom-environment.js → src/templates/custom-environment.js

@@ -1,6 +1,6 @@
-const { setupPage } = require('../dist/setup-page');
+const { setupPage, PlaywrightEnvironmentModule } = require('../index');
 
-const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
+const PlaywrightEnvironment = require(PlaywrightEnvironmentModule).default;
 
 class CustomEnvironment extends PlaywrightEnvironment {
   async setup() {

src/templates/custom-environment.ts

@@ -0,0 +1,20 @@
+import { setupPage, PlaywrightEnvironmentModule, type Event } from '../index';
+
+const PlaywrightEnvironment = require(PlaywrightEnvironmentModule).default;
+
+class CustomEnvironment extends PlaywrightEnvironment {
+  async setup() {
+    await super.setup();
+    await setupPage(this.global.page, this.global.context);
+  }
+
+  async teardown() {
+    await super.teardown();
+  }
+
+  async handleTestEvent(event: Event) {
+    await super.handleTestEvent(event);
+  }
+}
+
+module.exports = CustomEnvironment;

playwright/global-setup.js → src/templates/global-setup.js

@@ -1,5 +1,4 @@
-// global-setup.js
-const { globalSetup: playwrightGlobalSetup } = require('jest-playwright-preset');
+import { playwrightGlobalSetup } from '../index';
 
 module.exports = async function globalSetup(globalConfig) {
   return playwrightGlobalSetup(globalConfig);

src/templates/global-setup.ts

@@ -0,0 +1,5 @@
+import { playwrightGlobalSetup, type GlobalConfig } from '../index';
+
+module.exports = function globalSetup(globalConfig: GlobalConfig) {
+  return playwrightGlobalSetup(globalConfig);
+};

playwright/global-teardown.js → src/templates/global-teardown.js

@@ -1,5 +1,4 @@
-// global-teardown.js
-const { globalTeardown: playwrightGlobalTeardown } = require('jest-playwright-preset');
+const { playwrightGlobalTeardown } = require('../index');
 
 module.exports = async function globalTeardown(globalConfig) {
   // Your global teardown

src/templates/global-teardown.ts

@@ -0,0 +1,6 @@
+import { playwrightGlobalTeardown, GlobalConfig } from '../index';
+
+module.exports = async function globalTeardown(globalConfig: GlobalConfig) {
+  // Your global teardown
+  await playwrightGlobalTeardown(globalConfig);
+};

playwright/jest-setup.js → src/templates/jest-setup.js

@@ -1,4 +1,4 @@
-const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist');
+import { getTestRunnerConfig, setPreRender, setPostRender, setupPage } from '../index';
 
 const testRunnerConfig = getTestRunnerConfig(process.env.STORYBOOK_CONFIG_DIR);
 if (testRunnerConfig) {