@storybook/test-runner NPM

Storybook Test Runner

Storybook test runner turns all of your stories into executable tests.

It's currently a prototype that configures Jest to run smoke tests on your stories in either:

JSDOM - render stories to JSDOM using TestingLibrary
Playwright - render stories in a browser using Playwright

The goal of this prototype is to help evaluate both approaches: primarily for performance, but also to understand the general strengths and weaknesses.

Install

The package has not yet been published so you'll have to link it for now.

In the test-runner package:

yarn && yarn build
yarn link

In your project directory:

yarn link @storybook/test-runner
yarn add jest babel-jest @testing-library/react @storybook/testing-react --dev

For JSDOM (React-only for now):

yarn add jest-environment-jsdom --dev

For Playwright:

yarn add jest-playwright-preset playwright --dev

This simply installs the package in node_modules. Using the package is fully manual at this point.

Configure

To use the addon, you need to manually configure it:

Create a script in package.json
Create a jest config for your use case

JSDOM

Add a script to package.json:

{
  "scripts": {
    "test-storybook:jsdom": "jest --config ./jsdom-jest.config.js"
  }
}

Then create a config file jsdom-jest.config.js that sets up your environment. For example:

module.exports = {
  cacheDirectory: '.cache/jest',
  testMatch: ['**/*.stories.[jt]s?(x)'],
  moduleNameMapper: {
    // non-js files
    '\\.(jpg|jpeg|png|apng|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '@storybook/test-runner/mocks/fileMock.js',
    '\\.(css|scss|stylesheet)$': '@storybook/test-runner/mocks/styleMock.js',
  },
  transform: {
    '^.+\\.stories\\.[jt]sx?$': '@storyboook/test-runner/jsdom/transform',
    '^.+\\.[jt]sx?$': 'babel-jest',
  },
  testEnvironment: 'jest-environment-jsdom',
};

Playwright

Add a script to package.json:

{
  "scripts": {
    "test-storybook:playwright": "jest --config ./playwright-jest.config.js"
  }
}

Then create a config file playwright-jest.config.js that sets up your environment. For example:

module.exports = {
  cacheDirectory: '.cache/jest',
  testMatch: ['**/*.stories.[jt]s?(x)'],
  moduleNameMapper: {
    // non-js files
    '\\.(jpg|jpeg|png|apng|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '@storybook/test-runner/mocks/fileMock.js',
    '\\.(css|scss|stylesheet)$': '@storybook/test-runner/mocks/styleMock.js',
  },
  transform: {
    '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
    '^.+\\.[jt]sx?$': 'babel-jest',
  },
  preset: 'jest-playwright-preset',
  testEnvironment: '@storybook/test-runner/playwright/custom-environment.js',
};

NOTE: The code currently assumes that your Storybook is ALREADY running on process.env.STORYBOOK_PORT which defaults to 6006.

Running against a deployed Storybook

By default, the playwright assumes that you're running it against a locally served Storybook. If you want to define a target url so it runs against deployed Storybooks, you can do so by passing the TARGET_URL environment variable:

{
  "scripts": {
    "test-storybook:playwright": "TARGET_URL=the-storybook-url-here jest --config ./playwright-jest.config.js"
  }
}

Future work

In the future it will support the following features:

💨 Smoke test all stories
▶️ Test CSF3 play functions
🧪 Custom test functions
📄 Run addon reports
⚡️ Zero config setup

storybook-addons test runner jest testing-library playwright

0.11.1--canary.2171307.0

10 months ago

0.12.1--canary.323.0a75e4d.0

10 months ago

0.12.0--canary.323.82e6c47.0

10 months ago

0.12.0--canary.323.ce1e0b4.0

10 months ago

0.12.0--canary.323.80fbd00.0

10 months ago

0.12.0--canary.323.bb17ba7.0

10 months ago

0.12.0--canary.323.d1c4369.0

10 months ago

0.12.0--canary.323.fdfd80a.0

10 months ago

0.12.0--canary.323.f5c4ded.0

10 months ago

0.12.0--canary.323.c683052.0

10 months ago

0.12.0--canary.323.cb438fc.0

10 months ago

0.12.0--canary.323.bcf9103.0

10 months ago

0.12.0--canary.323.e39eb93.0

10 months ago

0.12.0--canary.323.de98a24.0

10 months ago

0.12.0--canary.323.b3b7824.0

10 months ago

0.11.1--canary.b5de7b0.0

10 months ago

0.12.0--canary.323.5d4e242.0

10 months ago

0.12.0--canary.323.1f4489c.0

10 months ago

0.12.0--canary.323.be58c87.0

10 months ago

0.12.0--canary.323.66612c2.0

10 months ago

0.12.0--canary.323.c10f812.0

10 months ago

0.12.0--canary.323.289bc6b.0

10 months ago

0.12.0--canary.323.41dfd3b.0

10 months ago

0.12.0--canary.323.9027337.0

10 months ago

0.12.0--canary.323.626abd0.0

10 months ago

0.10.1--canary.257.aa7a0c9.0

10 months ago

0.11.0-next.1

10 months ago

0.11.0

10 months ago

0.10.1--canary.257.9f58efe.0

11 months ago

0.12.0--canary.319.1d0defe.0

10 months ago

0.10.1--canary.b392a41.0

10 months ago

0.10.1--canary.315.28d1143.0

10 months ago

0.11.0-future.4

10 months ago

0.11.0-future.5

10 months ago

0.12.0--canary.319.a4547ea.0

10 months ago

0.11.0-future.2

11 months ago

0.11.0-future.3

11 months ago

0.10.1--canary.299.1cc46df.0

12 months ago

0.10.1--canary.303.86f873e.0

12 months ago

0.10.1--canary.2640e2f.0

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

0.9.5--canary.278.9d8f112.0

1 year ago

0.10.1--canary.299.3458403.0

1 year ago

0.9.5--canary.245.714d3ca.0

1 year ago

0.10.0

1 year ago

0.9.5--canary.250.4891420.0

1 year ago

0.9.5--canary.283.4979bd5.0

1 year ago

0.9.5--canary.278.4ef4cb1.0

1 year ago

0.10.1--canary.297.d3b6668.0

1 year ago

0.10.1--canary.250.c980993.0

1 year ago

0.11.0-next.0

1 year ago

0.10.1--canary.250.251cd3d.0

1 year ago

0.10.1--canary.250.6355af6.0

1 year ago

0.10.0-next.9

1 year ago

0.9.5--canary.288.1b073f4.0

1 year ago

0.9.5--canary.278.6cc4aba.0

1 year ago

0.11.0-future.0

1 year ago

0.11.0-future.1

1 year ago

0.11.0--canary.250.f7d5cb0.0

1 year ago

0.11.0--canary.250.483ef63.0

1 year ago

0.10.1--canary.250.2121cd5.0

1 year ago

0.9.5--canary.283.2ff4518.0

1 year ago

0.9.5--canary.278.e1f34bb.0

1 year ago

0.9.5--canary.273.08bdc9c.0

1 year ago

0.9.5--canary.273.680198c.0

1 year ago

0.9.5--canary.273.9729793.0

1 year ago

0.9.5--canary.257.095c944.0

1 year ago

0.9.5--canary.250.ac41e11.0

1 year ago

0.9.4

1 year ago

0.9.4--canary.a3c6e84.0

1 year ago

0.9.4--canary.82ca20e.0

1 year ago

0.9.5--canary.c5bfdab.0

1 year ago

0.9.4--canary.259.2b62dd1.0

1 year ago

0.10.0-next.7

1 year ago

0.10.0-next.8

1 year ago

0.10.0-next.6

1 year ago

0.9.5--canary.64feaa9.0

1 year ago

0.9.4--canary.258.06d5faf.0

1 year ago

0.9.4--canary.245.e9cdfa7.0

1 year ago

0.9.5--canary.257.5c845e4.0

1 year ago

0.9.4--canary.db255fc.0

1 year ago

0.9.5--canary.250.a561b1d.0

1 year ago

0.9.4--canary.248.fab1969.0

1 year ago

0.9.2--canary.586f746.0

1 year ago

0.9.3

1 year ago

0.9.3--canary.237.9eb3c32.0

1 year ago

0.9.4--canary.d6f12ad.0

1 year ago

0.9.4--canary.248.b68036e.0

1 year ago

0.7.3-canary.0

1 year ago

0.9.4--canary.248.64027c0.0

1 year ago

0.9.2--canary.234.da8ba2d.0

1 year ago

0.9.4--canary.245.b45b5f4.0

1 year ago

0.9.4--canary.248.3cf6dfe.0

1 year ago

0.9.3--canary.acc88f0.0

1 year ago

0.10.0-next.5

1 year ago

0.10.0-next.3

1 year ago

0.10.0-next.4

1 year ago

1.0.0--canary.224.3c57b66.0

1 year ago

0.9.3--canary.246.9fd8f6a.0

1 year ago

0.9.3--canary.237.b590957.0

1 year ago

0.9.4--canary.240.4cbe11b.0

1 year ago

0.9.3--canary.237.8963d15.0

1 year ago

0.9.4--canary.fe81f1b.0

1 year ago

0.9.4--canary.248.bf61174.0

1 year ago

0.9.2

1 year ago

0.9.3--canary.245.89d8b97.0

1 year ago

0.9.0-next.0

2 years ago

0.9.1--canary.207.96e3418.0

2 years ago

0.10.0--canary.210.cc6f26c.0

2 years ago

0.8.0--canary.198.270cf13.0

2 years ago

0.8.0--canary.198.53a5749.0

2 years ago

0.8.0--canary.198.4010e3e.0

2 years ago

0.10.0--canary.210.6671cb3.0

2 years ago

0.8.1--canary.12fe392.0

2 years ago

0.8.0

2 years ago

0.9.1--canary.211.3eb9f74.0

2 years ago

0.8.0-next.0

2 years ago

0.8.0-next.1

2 years ago

0.10.0--canary.210.8666bd0.0

2 years ago

0.8.0--canary.198.b923816.0

2 years ago

0.8.1--canary.e7ad0d9.0

2 years ago

0.8.0--canary.198.719a112.0

2 years ago

0.9.1--canary.212.769fef8.0

2 years ago

0.8.1--canary.4763859.0

2 years ago

0.9.1--canary.223.cef77d1.0

1 year ago

0.9.1--canary.210.ee5a64b.0

2 years ago

0.8.1--canary.622d458.0

2 years ago

0.9.1--canary.e75bcdb.0

2 years ago

0.8.1--canary.202.99d82aa.0

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

0.9.1--canary.207.e1be268.0

2 years ago

0.8.0--canary.198.3a52491.0

2 years ago

0.9.1--canary.210.99d2bba.0

2 years ago

0.9.1--canary.d2e6cbf.0

2 years ago

0.10.0--canary.210.ac5ad43.0

2 years ago

0.8.0--canary.198.ffbab9c.0

2 years ago

0.8.0--canary.198.d45feb9.0

2 years ago

0.9.1--canary.4cf13f8.0

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

0.9.1--canary.262a22c.0

2 years ago

0.10.0--canary.210.d43ea0e.0

2 years ago

0.8.1--canary.a439fc6.0

2 years ago

0.9.1--canary.8a508b9.0

2 years ago

0.8.0--canary.198.a7305ad.0

2 years ago

0.7.1-next.0

2 years ago

0.7.0--canary.174.a8dad66.0

2 years ago

0.7.2

2 years ago

0.7.1

2 years ago

0.7.0

2 years ago

0.7.0--canary.174.6c9f7a1.0

2 years ago

0.6.2--canary.175.18eec92.0

2 years ago

0.6.4--canary.179.342c799.0

2 years ago

0.7.0--canary.174.cac0727.0

2 years ago

0.7.2--canary.ccd26ab.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.7.0--canary.174.943f8fa.0

2 years ago

0.7.0--canary.174.7f2ca3d.0

2 years ago

0.7.0--canary.174.cda129e.0

2 years ago

0.7.0--canary.174.78f718e.0

2 years ago

0.7.1--canary.c42963d.0

2 years ago

0.6.4--canary.179.c8f28d5.0

2 years ago

0.7.2--canary.190.e69606f.0

2 years ago

0.7.0--canary.174.692cd7c.0

2 years ago

0.7.2--canary.97d645e.0

2 years ago

0.6.4--canary.179.36db6d2.0

2 years ago

0.7.0--canary.174.f617868.0

2 years ago

0.7.2-next.0

2 years ago

0.6.2--canary.175.1a3f8e0.0

2 years ago

0.7.0--canary.174.cf971d5.0

2 years ago

0.6.3--canary.177.1385c6d.0

2 years ago

0.7.0--canary.174.dc4bf73.0

2 years ago

0.6.3-next.0

2 years ago

0.7.0--canary.171.66af119.0

2 years ago

0.6.2--canary.078d2fc.0

2 years ago

0.7.0--canary.174.078d2fc.0

2 years ago

0.5.1--canary.4616a74.0

2 years ago

0.5.1--canary.33b5905.0

2 years ago

0.5.1--canary.443a937.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.6.1--canary.beffcb4.0

2 years ago

0.6.1--canary.c54567b.0

2 years ago

0.7.0-next.0

2 years ago

0.5.1--canary.8585857.0

2 years ago

0.5.1--canary.43599e3.0

2 years ago

0.3.1--canary.127.93e0bab.0

2 years ago

0.2.1--canary.130.ec36320.0

2 years ago

0.1.2--canary.125.4c38a87.0

2 years ago

0.2.0-next.0

2 years ago

0.2.0--canary.120.01a9e79.0

2 years ago

0.2.1--canary.127.8386541.0

2 years ago

0.3.1--canary.c0a01a2.0

2 years ago

0.3.1--canary.124.0eebca7.0

2 years ago

0.3.0-next.1

2 years ago

0.3.0-next.0

2 years ago

0.5.1--canary.51fa138.0

2 years ago

0.2.1--canary.130.6b507c8.0

2 years ago

0.2.0--canary.120.8ae5160.0

2 years ago

0.2.1--canary.130.498cc05.0

2 years ago

0.5.0

2 years ago

0.6.0-next.1

2 years ago

0.6.0-next.0

2 years ago

0.4.1--canary.4b2f8ea.0

2 years ago

0.2.0--canary.125.f7e708e.0

2 years ago

0.6.0--canary.157.4f0151c.0

2 years ago

0.4.0-next.2

2 years ago

0.2.0--canary.120.86b6b43.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.1.2--canary.125.7fdef2d.0

2 years ago

0.3.0

2 years ago

0.1.2--canary.902dd7d.0

2 years ago

0.3.1--canary.127.b53d76f.0

2 years ago

0.1.2--canary.124.6b86d9b.0

2 years ago

0.6.0--canary.154.5e2f62a.0

2 years ago

0.2.1--canary.130.4d54d5b.0

2 years ago

0.1.2--canary.b8d6d9c.0

2 years ago

0.4.0

2 years ago

0.6.0--canary.157.66af119.0

2 years ago

0.6.0--canary.157.045ea48.0

2 years ago

0.2.0--canary.125.f7c0433.0

2 years ago

0.5.0-next.0

2 years ago

0.2.1--canary.1f600a1.0

2 years ago

0.2.0

2 years ago

0.0.9--canary.107.7d12c13.0

2 years ago

0.0.9--canary.107.1b41303.0

2 years ago

0.1.1--canary.110.b615d3e.0

2 years ago

0.1.1--canary.110.d0c6d39.0

2 years ago

0.1.1--canary.dca7087.0

2 years ago

0.0.9--canary.107.bae60c2.0

2 years ago

0.0.9--canary.107.823d51a.0

2 years ago

0.1.1-next.0

2 years ago

0.1.2--canary.117.f7145f0.0

2 years ago

0.1.1--canary.efcc056.0

2 years ago

0.1.1--canary.110.87422b5.0

2 years ago

0.1.2--canary.e52920f.0

2 years ago

0.1.1--canary.110.a831a6b.0

2 years ago

0.1.0

2 years ago

0.1.1

2 years ago

0.0.9--canary.107.40ac66c.0

2 years ago

0.1.2-next.1

2 years ago

0.1.2-next.0

2 years ago

0.1.0-next.0

2 years ago

0.1.2--canary.117.c7c14d8.0

2 years ago

0.1.2--canary.f6f238d.0

2 years ago

0.0.9--canary.107.1f96eca.0

2 years ago

0.0.8-canary.102.5ccece6.0

2 years ago

0.0.7-canary.94.a4889a0.0

2 years ago

0.0.6-canary.90.afeeaef.0

2 years ago

0.0.8-canary.103.5109d35.0

2 years ago

0.0.8-canary.7cde91f.0

2 years ago

0.0.8-canary.0b166f8.0

2 years ago

0.0.6-canary.90.e609a4b.0

2 years ago

0.0.8-canary.101.df0a2dc.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.6-canary.88.021a28e.0

2 years ago

0.0.5-canary.47ec1cc.0

2 years ago

0.0.5-canary.86.11580c1.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.5-canary.d864b4a.0

2 years ago

0.0.5-next.1

2 years ago

0.0.5-next.2

2 years ago

0.0.5-canary.bad83f0.0

2 years ago

0.0.5-next.0

2 years ago

0.0.2-canary.31.a821888.0

2 years ago

0.0.2-canary.38.7397f12.0

2 years ago

0.0.3-canary.47.b7dec8f.0

2 years ago

0.0.3-canary.2f574e1.0

2 years ago

0.0.5-canary.cb8b66e.0

2 years ago

0.0.3-canary.52.ec4fcc0.0

2 years ago

0.0.3-canary.47.e38bd00.0

2 years ago

0.0.2-canary.38.d3159f2.0

2 years ago

0.0.2-canary.e62f9ee.0

2 years ago

0.0.3-canary.56.8180f6c.0

2 years ago

0.0.2-canary.41.9b77c29.0

2 years ago

0.0.2-canary.35.7de46f0.0

2 years ago

0.0.3-canary.52.7f2568f.0

2 years ago

0.0.1-canary.11.5fd90e8.0

2 years ago

0.0.2-canary.38.47da695.0

2 years ago

0.0.3-canary.2a1bda5.0

2 years ago

0.0.2-canary.37.86a700a.0

2 years ago

0.0.2-canary.40.abe7694.0

2 years ago

0.0.2-canary.35.c518ba7.0

2 years ago

0.0.1-canary.16.dc0b1a5.0

2 years ago

0.0.2-canary.7025cda.0

2 years ago

0.0.5-canary.01b8104.0

2 years ago

0.0.1-canary.11.80ed3c2.0

2 years ago

0.0.3-canary.0e58a8c.0

2 years ago

0.0.2-canary.35.7792d8f.0

2 years ago

0.0.3-canary.56.6df6b2d.0

2 years ago

0.0.2-canary.31.86bd4d6.0

2 years ago

0.0.1-canary.17.36a0f8a.0

2 years ago

0.0.3-canary.5c268f6.0

2 years ago

0.0.4-canary.65.73bc8bf.0

2 years ago

0.0.3-canary.47.c8d8e3d.0

2 years ago

0.0.2-canary.38.db1b345.0

2 years ago

0.0.1-canary.11.5a1a392.0

2 years ago

0.0.3-next.10

2 years ago

0.0.2-canary.41.20840c8.0

2 years ago

0.0.3-canary.55.c9e2fe2.0

2 years ago

0.0.2-canary.31.64c411c.0

2 years ago

0.0.2-canary.40.d808daf.0

2 years ago

0.0.2-canary.40.2f43e10.0

2 years ago

0.0.3-canary.53.755f06f.0

2 years ago

0.0.2-canary.31.a4d7e44.0

2 years ago

0.0.1-canary.16.2a516d2.0

2 years ago

0.0.3-canary.0c7a0b6.0

2 years ago

0.0.2-canary.31.3f9c9e0.0

2 years ago

0.0.3-canary.55.498e4cb.0

2 years ago

0.0.1-canary.17.b258153.0

2 years ago

0.0.4-canary.65.f1b0025.0

2 years ago

0.0.1-canary.11.403f2b1.0

2 years ago

0.0.3-canary.44.c61fe5d.0

2 years ago

0.0.1

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.3-canary.47.62c427a.0

2 years ago

0.0.4

2 years ago

0.0.3-canary.55.ef89f5a.0

2 years ago

0.0.2-canary.35.3bd4e9b.0

2 years ago

0.0.2-canary.27.eabf5e0.0

2 years ago

0.0.2-canary.b107dd0.0

2 years ago

0.0.3-canary.79fbb3e.0

2 years ago

0.0.2-canary.40.ff97de9.0

2 years ago

0.0.2-canary.54a5b3c.0

2 years ago

0.0.2-canary.4b14058.0

2 years ago

0.0.1-canary.cfc25f0.0

2 years ago

0.0.1-canary.17.472e064.0

2 years ago

0.0.3-canary.96e1f96.0

2 years ago

0.0.2-canary.c51469c.0

2 years ago

0.0.3-canary.54.04b73e7.0

2 years ago

0.0.3-canary.804a6de.0

2 years ago

0.0.2-canary.a854652.0

2 years ago

0.0.3-canary.46.7eac123.0

2 years ago

0.0.1-canary.11.304fae5.0

2 years ago

0.0.2-canary.31.080136b.0

2 years ago

0.0.2-canary.38.8a86c58.0

2 years ago

0.0.2-canary.38.e12588f.0

2 years ago

0.0.3-canary.55.62d7974.0

2 years ago

0.0.3-canary.46.d7bde1d.0

2 years ago

0.0.2-canary.40.7f5f894.0

2 years ago

0.0.1-canary.11.ce8395b.0

2 years ago

0.0.2-canary.35.8a26a58.0

2 years ago

0.0.3-canary.61.4c21f55.0

2 years ago

0.0.3-canary.47.668e34b.0

2 years ago

0.0.3-canary.963e230.0

2 years ago

0.0.2-canary.29.aa0a460.0

2 years ago

0.0.1-canary.17.2106f55.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.3-canary.75dc999.0

2 years ago

0.0.2-next.6

2 years ago

0.0.2-canary.31.ad50d76.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.3-canary.54.7dfda67.0

2 years ago

0.0.2-canary.38.ad367be.0

2 years ago

0.0.3-canary.44.20331d9.0

2 years ago

0.0.5-canary.67.42786ea.0

2 years ago

0.0.2-canary.31.5bafa92.0

2 years ago

0.0.3-canary.e9fb1bc.0

2 years ago

0.0.1-next.0

2 years ago

0.0.1-canary.11.deb0cc1.0

2 years ago

0.0.3-canary.205a44a.0

2 years ago

0.0.3-next.3

2 years ago

0.0.2-next.3

2 years ago

0.0.3-next.4

2 years ago

0.0.2-canary.38.4d63417.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.1-canary.11.5ad0240.0

2 years ago

0.0.1-canary.11.192ac9f.0

2 years ago

0.0.1-canary.13.6742668.0

2 years ago

0.0.1-canary.2cc0f62.0

2 years ago

0.0.1-canary.11.bbb2a78.0

2 years ago

0.0.1-canary.11.532a08a.0

2 years ago

0.0.1-canary.11.12aa8ef.0

2 years ago

0.0.1-canary.11.7cdc2b9.0

2 years ago

0.0.1-canary.11.4c37f6c.0

2 years ago

0.0.1-canary.11.586c162.0

2 years ago

0.0.1-canary.11.bc47e16.0

2 years ago

0.0.1-canary.11.675744a.0

2 years ago

0.0.1-canary.4cf9d60.0

2 years ago

0.0.1-canary.8386bde.0

2 years ago

0.0.1-canary.797f785.0

2 years ago

0.0.1-canary.295ff55.0

2 years ago