Update Jest to 28

README.md

@@ -2,6 +2,8 @@
 
 Storybook test runner turns all of your stories into executable tests.
 
+> ⚠️⚠️ If you're using **Jest 27** and can't migrate to Jest 28, please check the [Jest 27 support](#jest-27-support) section below.
+
 <h2>Table of Contents</h2>
 
 - [Features](#features)

bin/test-storybook.js

@@ -97,31 +97,14 @@ function sanitizeURL(url) {
   return finalURL;
 }
 
-const checkForIncompatibilities = () => {
-  try {
-    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) {
-    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);
-  }
-};
-
 async function executeJestPlaywright(args) {
-  const jest = require('jest');
+  // Always prefer jest installed via the test runner. If it's hoisted, it will get it from root node_modules
+  const jestPath = path.dirname(
+    require.resolve('jest', {
+      paths: [path.join(__dirname, '../@storybook/test-runner/node_modules')],
+    })
+  );
+  const jest = require(jestPath);
   let argv = args.slice(2);
 
   const jestConfigPath = fs.existsSync('test-runner-jest.config.js')
@@ -222,8 +205,6 @@ function ejectConfiguration() {
 }
 
 const main = async () => {
-  checkForIncompatibilities();
-
   const { jestOptions, runnerOptions } = getCliOptions();
 
   if (runnerOptions.eject) {

package.json

@@ -64,7 +64,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",
@@ -78,19 +78,19 @@
     "@types/jest": "^27.0.3",
     "@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",
     "husky": "^8.0.0",
-    "jest-image-snapshot": "^4.5.1",
+    "jest-image-snapshot": "^5.1.0",
     "lint-staged": "^13.0.3",
     "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.8",
     "typescript": "^4.2.4",
     "wait-on": "^6.0.0"
   },
@@ -108,26 +108,25 @@
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   },
   "dependencies": {
+    "@storybook/core-common": "^6.5.0",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/csf-tools": "^6.5.0",
+    "@storybook/store": "^6.5.0",
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "global": "^4.4.0",
-    "jest": "^26.6.3 || ^27.0.0",
+    "jest": "^28.0.0",
     "jest-junit": "^14.0.0",
-    "jest-playwright-preset": "^1.7.2",
+    "jest-playwright-preset": "^2.0.0",
+    "jest-runner": "^28.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",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0"
   },
-  "peerDependencies": {
-    "@storybook/core-common": "^6.5.0",
-    "@storybook/csf-tools": "^6.5.0",
-    "@storybook/store": "^6.5.0"
-  },
   "auto": {
     "plugins": [
       "npm",

playwright/transform.js

@@ -2,7 +2,7 @@ const { transform: babelTransform } = require('@babel/core');
 const { transformPlaywright } = require('../dist/cjs/playwright/transformPlaywright');
 
 module.exports = {
-  process(src, filename, config) {
+  process(src, filename) {
     const csfTest = transformPlaywright(src, filename);
 
     const result = babelTransform(csfTest, {
@@ -16,6 +16,6 @@ module.exports = {
       ],
     });
 
-    return result ? result.code : src;
+    return result ? { code: result.code } : src;
   },
 };

src/config/jest-playwright.ts

@@ -1,3 +1,41 @@
+import path from 'path';
+
+/**
+ * IMPORTANT NOTE:
+ * Depending on the user's project and package manager, it's possible that jest-playwright-preset
+ * is going to be located in @storybook/test-runner/node_modules OR in the root node_modules
+ *
+ * By setting `preset: 'jest-playwright-preset` the change of resolution issues is higher, because
+ * the lib might be installed inside of @storybook/test-runner/node_modules but references as if it was
+ * in the root node_modules.
+ *
+ * This function does the same thing as `preset: 'jest-playwright-preset` but makes sure that the
+ * necessary moving parts are all required within the correct path.
+ * */
+const getJestPlaywrightConfig = () => {
+  const presetBasePath = path.dirname(
+    require.resolve('jest-playwright-preset', {
+      paths: [path.join(__dirname, '../../node_modules')],
+    })
+  );
+  const expectPlaywrightPath = path.dirname(
+    require.resolve('expect-playwright', {
+      paths: [path.join(__dirname, '../../node_modules')],
+    })
+  );
+  return {
+    runner: path.join(presetBasePath, 'runner.js'),
+    globalSetup: '@storybook/test-runner/playwright/global-setup.js',
+    globalTeardown: '@storybook/test-runner/playwright/global-teardown.js',
+    testEnvironment: '@storybook/test-runner/playwright/custom-environment.js',
+    setupFilesAfterEnv: [
+      '@storybook/test-runner/playwright/jest-setup.js',
+      expectPlaywrightPath,
+      path.join(presetBasePath, 'lib', 'extends.js'),
+    ],
+  };
+};
+
 export const getJestConfig = () => {
   const {
     TEST_ROOT,
@@ -19,11 +57,6 @@ export const getJestConfig = () => {
       '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
       '^.+\\.[jt]sx?$': 'babel-jest',
     },
-    preset: 'jest-playwright-preset',
-    globalSetup: '@storybook/test-runner/playwright/global-setup.js',
-    globalTeardown: '@storybook/test-runner/playwright/global-teardown.js',
-    testEnvironment: '@storybook/test-runner/playwright/custom-environment.js',
-    setupFilesAfterEnv: ['@storybook/test-runner/playwright/jest-setup.js'],
     snapshotSerializers: ['jest-serializer-html'],
     testEnvironmentOptions: {
       'jest-playwright': {
@@ -38,6 +71,7 @@ export const getJestConfig = () => {
       require.resolve('jest-watch-typeahead/testname'),
     ],
     watchPathIgnorePatterns: ['coverage', '.nyc_output', '.cache'],
+    ...getJestPlaywrightConfig(),
   };
 
   if (TEST_MATCH) {