feat: jest 28 support

README.md

@@ -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@27 -D
+yarn add jest@28 -D
 ```
 
 <details>
@@ -513,17 +513,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

@@ -101,16 +101,16 @@ 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.
+    if (semver.lte(jestVersion, '28.0.0')) {
+      error(dedent`We detected that your project is using Jest below 28.0.0, which is incompatible with the test runner.
 
-      You can find more info at: https://github.com/storybookjs/test-runner#errors-with-jest-28
+      You can find more info at: https://github.com/storybookjs/test-runner
       `);
       process.exit(1);
     }
   } catch (err) {
     error(
-      'We detected that Jest is not installed in your project. Please install Jest@27 and run test-storybook again.'
+      'We detected that Jest is not installed in your project. Please install Jest@28 and run test-storybook again.'
     );
     process.exit(1);
   }

package.json

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

playwright/transform.js

@@ -15,6 +15,6 @@ module.exports = {
         '@babel/preset-react',
       ],
     });
-    return result ? result.code : src;
+    return result ? { code: result.code } : src;
   },
 };