Merge pull request #175 from storybookjs/feat/move-jest-as-internal-dep

feat: turn Jest into an internal dependency

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
-```
-
-<details>
-  <summary>1.1 Optional instructions to install the Interactions addon for visual debugging of play functions</summary>
-
-```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,
-  },
-};
-```
-
-</details>
-
 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 #<Object> 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`.

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);
   }
 };

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": [

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==