Add Jest compatibility check

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-  "deepscan.enable": true
+  "deepscan.enable": true,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#00333B",
+    "titleBar.activeBackground": "#004752",
+    "titleBar.activeForeground": "#ECFCFF"
+  }
 }

README.md

@@ -316,6 +316,17 @@ it('button--basic', async () => {
 
 ## 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

@@ -8,6 +8,7 @@ const fs = require('fs');
 const dedent = require('ts-dedent').default;
 const path = require('path');
 const tempy = require('tempy');
+const semver = require('semver');
 const { getCliOptions, getStorybookMetadata } = require('../dist/cjs/util');
 const { transformPlaywrightJson } = require('../dist/cjs/playwright/transformPlaywrightJson');
 
@@ -24,6 +25,7 @@ process.on('unhandledRejection', (err) => {
 });
 
 const log = (message) => console.log(`[test-storybook] ${message}`);
+const error = (message) => console.error(`[test-storybook] ${message}`);
 
 // Clean up tmp files globally in case of control-c
 let storiesJsonTmpDir;
@@ -56,6 +58,22 @@ function sanitizeURL(url) {
   return finalURL;
 }
 
+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)
+    }
+  } catch (err) {
+    error('We detected that Jest is not installed in your project. Please install it and run test-storybook again.')
+    process.exit(1)
+  }
+}
+
 async function executeJestPlaywright(args) {
   const jest = require('jest');
   let argv = args.slice(2);
@@ -130,6 +148,8 @@ function ejectConfiguration() {
 }
 
 const main = async () => {
+  checkForIncompatibilities();
+
   const { jestOptions, runnerOptions } = getCliOptions();
 
   if (runnerOptions.eject) {

package.json

@@ -105,6 +105,7 @@
     "jest-watch-typeahead": "^1.0.0",
     "node-fetch": "^2",
     "playwright": "^1.14.0",
+    "semver": "^7.3.7",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0"
   },

yarn.lock

@@ -11062,7 +11062,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-[email protected], semver@^7.0.0, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
+[email protected], semver@^7.0.0, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==