self-contain jest-playwright-preset config

storybookjs · Aug 26, 2022 · dc4bf73 · dc4bf73
1 parent d4f79d8
commit dc4bf73
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/bin/test-storybook.js b/bin/test-storybook.js
@@ -96,30 +96,15 @@ function sanitizeURL(url) {
 
   return finalURL;
 }
-const checkForIncompatibilities = () => {
-  try {
-    const jestVersion = require(path.join('jest', 'package.json')).version;
-    const isJestCompatible = semver.satisfies(jestVersion, '^28.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')

diff --git a/src/config/jest-playwright.ts b/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) {