self-contain jest-playwright-preset config

src/config/jest-playwright.ts

@@ -1,3 +1,29 @@
+import path from '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 +45,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 +59,7 @@ export const getJestConfig = () => {
       require.resolve('jest-watch-typeahead/testname'),
     ],
     watchPathIgnorePatterns: ['coverage', '.nyc_output', '.cache'],
+    ...getJestPlaywrightConfig(),
   };
 
   if (TEST_MATCH) {