diff --git a/README.md b/README.md index 1c35b530..04126c5d 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Storybook test runner turns all of your stories into executable tests. - [Features](#features) - [How it works](#how-it-works) - [Getting started](#getting-started) + - [Jest compatibility](#jest-compatibility) - [CLI Options](#cli-options) - [Configuration](#configuration) - [Running against a deployed Storybook](#running-against-a-deployed-storybook) @@ -26,7 +27,6 @@ Storybook test runner turns all of your stories into executable tests. - [Render lifecycle](#render-lifecycle) - [Global utility functions](#global-utility-functions) - [Troubleshooting](#troubleshooting) - - [Errors with Jest 28](#errors-with-jest-28) - [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) - [The test runner reports "No tests found" running on a Windows CI](#the-test-runner-reports-no-tests-found-running-on-a-windows-ci) @@ -62,38 +62,12 @@ If there are any failures, the test runner will provide an output with the error ## Getting started -1. Install the test runner and the interactions addon in Storybook: +1. Install the test runner: ```jsx yarn add @storybook/test-runner -D ``` -Jest is a peer dependency. If you don't have it, also install it - -```jsx -yarn add jest@27 -D -``` - -
- 1.1 Optional instructions to install the Interactions addon for visual debugging of play functions - -```jsx -yarn add @storybook/addon-interactions @storybook/jest @storybook/testing-library -D -``` - -Then add it to your `.storybook/main.js` config and enable debugging: - -```jsx -module.exports = { - addons: ['@storybook/addon-interactions'], - features: { - interactionsDebugger: true, - }, -}; -``` - -
- 2. Add a `test-storybook` script to your package.json ```json @@ -104,13 +78,15 @@ module.exports = { } ``` -3. Run Storybook (the test runner runs against a running Storybook instance): +3. Optionally, follow [the documentation](https://storybook.js.org/docs/react/writing-tests/interaction-testing#set-up-the-interactions-addon) for writing interaction tests and using [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions/) to visualize the interactions with an interactive debugger in Storybook. + +4. Run Storybook (the test runner runs against a running Storybook instance): ```jsx yarn storybook ``` -4. Run the test runner: +5. Run the test runner: ```jsx yarn test-storybook @@ -124,6 +100,16 @@ yarn test-storybook > TARGET_URL=http://localhost:9009 yarn test-storybook > ``` +### Jest compatibility + +The Storybook test runner comes with Jest installed as an internal dependency. In case you are also using Jest as a dependency in your project, in order to avoid possible conflicts, you should use a compatible version of the test runner. + +| Jest version | Test runner version | +| ------------ | ------------------- | +| ^26.6.3 | ^0.6.2 | +| ^27.0.0 | ^0.6.2 | +| ^28.0.0 | ^0.7.0 and higher | + ## CLI Options ```plaintext @@ -152,12 +138,14 @@ Usage: test-storybook [options] ## Configuration -The test runner is based on [Jest](https://jestjs.io/) and will accept the [CLI options](https://jestjs.io/docs/cli) that Jest does, like `--watch`, `--watchAll`, `--maxWorkers`, etc. +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. The test runner works out of the box, but if you want better control over its configuration, you can run `test-storybook --eject` to create a local `test-runner-jest.config.js` file in the root folder of your project, which will be used by the test runner. The test runner uses [jest-playwright](https://github.com/playwright-community/jest-playwright) and you can pass [testEnvironmentOptions](https://github.com/playwright-community/jest-playwright#configuration) to further configure it, such as how it's done above to run tests against all browsers instead of just chromium. For this you must eject the test runner configuration. +> **NOTE:** The Jest options relate to the version of Jest that come in the test runner. You can check the [Jest compatibility table](#jest-compatibility) for reference. + ## Running against a deployed Storybook By default, the test runner assumes that you're running it against a locally served Storybook on port 6006. @@ -517,17 +505,6 @@ module.exports = { ## Troubleshooting -#### Errors with Jest 28 - -Jest 28 has been released, but unfortunately `jest-playwright` is not yet compatible with it, therefore the test-runner is also not compatible. You likely are having an issue that looks like this: - -```sh - TypeError: Jest: Got error running globalSetup - reason: Class extends value # is not a constructor or null -``` - -As soon as `jest-playwright` is compatible, so the test-runner will be too. Please follow [this issue](https://github.com/storybookjs/test-runner/issues/99) for updates. - #### The error output in the CLI is too short By default, the test runner truncates error outputs at 1000 characters, and you can check the full output directly in Storybook, in the browser. If you do want to change that limit, however, you can do so by setting the `DEBUG_PRINT_LIMIT` environment variable to a number of your choosing, for example, `DEBUG_PRINT_LIMIT=5000 yarn test-storybook`. diff --git a/bin/test-storybook.js b/bin/test-storybook.js index e70acf32..5f5b13ee 100755 --- a/bin/test-storybook.js +++ b/bin/test-storybook.js @@ -99,18 +99,23 @@ function sanitizeURL(url) { const checkForIncompatibilities = () => { try { - const jestVersion = require('jest/package.json').version; - if (semver.gte(jestVersion, '28.0.0')) { - error(dedent`We detected that your project is using Jest 28.0.0 or higher, which is currently incompatible with the test runner. - - You can find more info at: https://github.com/storybookjs/test-runner#errors-with-jest-28 - `); - process.exit(1); + const jestVersion = require(path.join('jest', 'package.json')).version; + const isJestCompatible = + semver.satisfies(jestVersion, '^26.6.3') || semver.satisfies(jestVersion, '^27.0.0'); + if (!isJestCompatible) { + throw new Error('INCOMPATIBLE_VERSION', { cause: jestVersion }); } } catch (err) { - error( - 'We detected that Jest is not installed in your project. Please install Jest@27 and run test-storybook again.' - ); + if (err.message === 'INCOMPATIBLE_VERSION') { + error(dedent`We detected that your project is using Jest ${err.cause}, which is incompatible with this version of the test runner. + + You can find more info at: https://github.com/storybookjs/test-runner#jest-compatibility + `); + } else { + error( + `There was an issue while trying to resolve the Jest version of your project. Please file an issue at https://github.com/storybookjs/test-runner/issues` + ); + } process.exit(1); } }; diff --git a/package.json b/package.json index de4bed7d..64fbe48e 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,6 @@ "babel-plugin-istanbul": "^6.1.1", "concurrently": "^7.0.0", "husky": "^8.0.0", - "jest": "^27.0.6", "jest-image-snapshot": "^4.5.1", "lint-staged": "^13.0.3", "prettier": "^2.3.1", @@ -113,6 +112,7 @@ "can-bind-to-host": "^1.1.1", "commander": "^9.0.0", "global": "^4.4.0", + "jest": "^26.6.3 || ^27.0.0", "jest-playwright-preset": "^1.7.2", "jest-serializer-html": "^7.1.0", "jest-watch-typeahead": "^1.0.0", @@ -125,8 +125,7 @@ "peerDependencies": { "@storybook/core-common": "^6.5.0", "@storybook/csf-tools": "^6.5.0", - "@storybook/store": "^6.5.0", - "jest": "^26.6.3 || ^27.0.0" + "@storybook/store": "^6.5.0" }, "auto": { "plugins": [ diff --git a/yarn.lock b/yarn.lock index 90d2d08e..788eff6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8963,7 +8963,7 @@ jest-worker@^27.4.5, jest-worker@^27.5.1: merge-stream "^2.0.0" supports-color "^8.0.0" -jest@^27.0.6: +"jest@^26.6.3 || ^27.0.0": version "27.5.1" resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc" integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==