storybookjs · yannbf · Aug 23, 2022 · Aug 23, 2022
@@ -24,7 +24,7 @@ Storybook test runner turns all of your stories into executable tests.
   - [Image snapshot recipe](#image-snapshot-recipe)
   - [Render lifecycle](#render-lifecycle)
 - [Troubleshooting](#troubleshooting)
-  - [Jest 27 support](#jest-27-support)
+  - [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)
@@ -68,7 +68,7 @@ yarn add @storybook/test-runner -D
 Jest is a peer dependency. If you don't have it, also install it
 
 ```jsx
-yarn add jest -D
+yarn add jest@27 -D
 ```
 
 <details>
@@ -515,30 +515,13 @@ module.exports = {
 
 ## Troubleshooting
 
-#### Jest 27 support
-
-[`jest-playwright` 2.0.0](https://github.com/playwright-community/jest-playwright/releases/tag/v2.0.0) has a breaking change of requiring Jest 28+. To support older versions of Jest you will need to use [Yarn resolutions](https://yarnpkg.com/configuration/manifest/#resolutions) or [NPM overrides](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to downgrade `jest-playwright-preset` to `^1.7.2`.
-
-
-```json
-// Yarn resolutions in your projects package.json
-{
-  "resolutions": {
-    "jest-playwright-preset": "^1.7.2"
-  }
-}
-```
-
-```json
-// NPM overrides in your projects package.json
-{
-  "overrides": {
-    "@storybook/test-runner": {
-      "jest-playwright-preset": "^1.7.2"
-    }
-  }
-}
+#### 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
 

@@ -100,12 +100,16 @@ function sanitizeURL(url) {
 const checkForIncompatibilities = () => {
   try {
     const jestVersion = require('jest/package.json').version;
-    if (semver.valid(jestVersion) === null) {
-      throw new Error('Not valid Jest version or no Jest installed');
+    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);
     }
   } catch (err) {
     error(
-      'We detected that Jest is not installed in your project. Please install Jest and run test-storybook again.'
+      'We detected that Jest is not installed in your project. Please install Jest@27 and run test-storybook again.'
     );
     process.exit(1);
   }

@@ -63,7 +63,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/template": "^7.14.5",
     "@babel/types": "^7.14.8",
-    "@jest/types": "^28.1.3",
+    "@jest/types": "^27.0.6",
     "@storybook/addon-coverage": "^0.0.1",
     "@storybook/addon-essentials": "^6.5.0",
     "@storybook/addon-interactions": "^6.5.0",
@@ -74,21 +74,21 @@
     "@testing-library/dom": "^8.1.0",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^27.0.3",
     "@types/node": "^16.4.1",
     "auto": "^10.3.0",
-    "babel-jest": "^28.1.3",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "concurrently": "^7.0.0",
-    "jest": "^28.1.3",
-    "jest-image-snapshot": "^5.1.0",
+    "jest": "^27.0.6",
+    "jest-image-snapshot": "^4.5.1",
     "prettier": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^28.0.7",
+    "ts-jest": "^27.0.4",
     "typescript": "^4.2.4",
     "wait-on": "^6.0.0"
   },
@@ -107,9 +107,9 @@
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "global": "^4.4.0",
-    "jest-playwright-preset": "^1.7.2 || ^2.0.0",
+    "jest-playwright-preset": "^1.7.2",
     "jest-serializer-html": "^7.1.0",
-    "jest-watch-typeahead": "^2.0.0",
+    "jest-watch-typeahead": "^1.0.0",
     "node-fetch": "^2",
     "playwright": "^1.14.0",
     "semver": "^7.3.7",
@@ -120,7 +120,7 @@
     "@storybook/core-common": "^6.5.0",
     "@storybook/csf-tools": "^6.5.0",
     "@storybook/store": "^6.5.0",
-    "jest": "^26.6.3 || ^27.0.0 || ^28.0.0"
+    "jest": "^26.6.3 || ^27.0.0"
   },
   "auto": {
     "plugins": [

@@ -1,5 +1,4 @@
 const { transform: babelTransform } = require('@babel/core');
-const semver = require('semver');
 const { transformPlaywright } = require('../dist/cjs/playwright/transformPlaywright');
 
 module.exports = {
@@ -16,24 +15,7 @@ module.exports = {
         '@babel/preset-react',
       ],
     });
-
-    if (result) {
-      /**
-       * To support Jest 28 we need to check the version of Jest used in the project.
-       * As process() and processAsync() methods of a custom transformer module cannot return a string anymore.
-       * They must always return an object. See https://jestjs.io/docs/upgrading-to-jest28#transformer
-       */
-      const jestVersion = require('jest/package.json').version;
-
-      if (semver.lte(jestVersion, '28.0.0')) {
-        return result.code;
-      }
-
-      return {
-        code: result.code,
-      };
-    }
-
-    return src;
+
+    return result ? result.code : src;
   },
 };