Support importing stories from separate packages

src/config/jest-playwright.ts

@@ -1,4 +1,7 @@
 import path from 'path';
+import { getProjectRoot } from '@storybook/core-common';
+
+const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH || '@storybook/test-runner';
 
 /**
  * IMPORTANT NOTE:
@@ -25,11 +28,11 @@ const getJestPlaywrightConfig = () => {
   );
   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',
+    globalSetup: require.resolve(TEST_RUNNER_PATH + '/playwright/global-setup.js'),
+    globalTeardown: require.resolve(TEST_RUNNER_PATH + '/playwright/global-teardown.js'),
+    testEnvironment: require.resolve(TEST_RUNNER_PATH + '/playwright/custom-environment.js'),
     setupFilesAfterEnv: [
-      '@storybook/test-runner/playwright/jest-setup.js',
+      require.resolve(TEST_RUNNER_PATH + '/playwright/jest-setup.js'),
       expectPlaywrightPath,
       path.join(presetBasePath, 'lib', 'extends.js'),
     ],
@@ -66,13 +69,15 @@ export const getJestConfig = () => {
 
   const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
 
+  const testMatch = (STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';')) || [];
+
   let config = {
-    rootDir: process.cwd(),
+    rootDir: getProjectRoot(),
     roots: TEST_ROOT ? [TEST_ROOT] : undefined,
     reporters,
-    testMatch: STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';'),
+    testMatch,
     transform: {
-      '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
+      '^.+\\.stories\\.[jt]sx?$': require.resolve(TEST_RUNNER_PATH + '/playwright/transform'),
       '^.+\\.[jt]sx?$': swcJestPath,
     },
     snapshotSerializers: [jestSerializerHtmlPath],

src/playwright/transformPlaywright.test.ts

@@ -1,11 +1,22 @@
 import dedent from 'ts-dedent';
 import path from 'path';
-import * as coreCommon from '@storybook/core-common';
 import * as storybookMain from '../util/getStorybookMain';
 
 import { transformPlaywright } from './transformPlaywright';
 
-jest.mock('@storybook/core-common');
+jest.mock('@storybook/core-common', () => ({
+  ...jest.requireActual('@storybook/core-common'),
+  getProjectRoot: jest.fn(() => '/foo/bar'),
+  normalizeStories: jest.fn(() => [
+    {
+      titlePrefix: 'Example',
+      files: '**/*.stories.@(mdx|tsx|ts|jsx|js)',
+      directory: './stories/basic',
+      importPathMatcher:
+        /^\.[\\/](?:stories\/basic(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(mdx|tsx|ts|jsx|js))$/,
+    },
+  ]),
+}));
 
 expect.addSnapshotSerializer({
   print: (val: any) => val.trim(),
@@ -24,15 +35,6 @@ describe('Playwright', () => {
         },
       ],
     }));
-    jest.spyOn(coreCommon, 'normalizeStories').mockImplementation(() => [
-      {
-        titlePrefix: 'Example',
-        files: '**/*.stories.@(mdx|tsx|ts|jsx|js)',
-        directory: './stories/basic',
-        importPathMatcher:
-          /^\.[\\/](?:stories\/basic(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(mdx|tsx|ts|jsx|js))$/,
-      },
-    ]);
   });
 
   const filename = './stories/basic/Header.stories.js';

src/util/getStorybookMetadata.test.ts

@@ -2,6 +2,20 @@ import * as storybookMain from './getStorybookMain';
 
 import { getStorybookMetadata } from './getStorybookMetadata';
 
+jest.mock('@storybook/core-common', () => ({
+  ...jest.requireActual('@storybook/core-common'),
+  getProjectRoot: jest.fn(() => '/foo/bar'),
+  normalizeStories: jest.fn(() => [
+    {
+      titlePrefix: 'Example',
+      files: '**/*.stories.@(mdx|tsx|ts|jsx|js)',
+      directory: './stories/basic',
+      importPathMatcher:
+        /^\.[\\/](?:stories\/basic(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(mdx|tsx|ts|jsx|js))$/,
+    },
+  ]),
+}));
+
 describe('getStorybookMetadata', () => {
   afterAll(() => {
     process.env.STORYBOOK_CONFIG_DIR = undefined;
@@ -32,7 +46,7 @@ describe('getStorybookMetadata', () => {
     process.env.STORYBOOK_CONFIG_DIR = '.storybook';
     const { storiesPaths } = getStorybookMetadata();
     expect(storiesPaths).toMatchInlineSnapshot(
-      `"<rootDir>/stories/basic/**/*.@(mdx|stories.@(tsx|ts|jsx|js))"`
+      `"/foo/bar/stories/basic/**/*.stories.@(mdx|tsx|ts|jsx|js)"`
     );
   });
 
@@ -44,7 +58,9 @@ describe('getStorybookMetadata', () => {
     jest.spyOn(storybookMain, 'getStorybookMain').mockReturnValueOnce(mockedMain);
     process.env.STORYBOOK_CONFIG_DIR = '.storybook';
     const { storiesPaths } = getStorybookMetadata();
-    expect(storiesPaths).toMatchInlineSnapshot(`"<rootDir>/**/stories/*.stories.@(js|ts)"`);
+    expect(storiesPaths).toMatchInlineSnapshot(
+      `"/foo/bar/stories/basic/**/*.stories.@(mdx|tsx|ts|jsx|js)"`
+    );
   });
 
   it('should return storiesPath from mixed CSF2 and CSF3 style config', () => {
@@ -62,7 +78,7 @@ describe('getStorybookMetadata', () => {
     process.env.STORYBOOK_CONFIG_DIR = '.storybook';
     const { storiesPaths } = getStorybookMetadata();
     expect(storiesPaths).toMatchInlineSnapshot(
-      `"<rootDir>/stories/basic/**/*.@(mdx|stories.@(tsx|ts|jsx|js));<rootDir>/stories/complex/*.stories.@(js|ts)"`
+      `"/foo/bar/stories/basic/**/*.stories.@(mdx|tsx|ts|jsx|js)"`
     );
   });
 

src/util/getStorybookMetadata.ts

@@ -1,9 +1,9 @@
-import { relative, resolve } from 'path';
-import { normalizeStories } from '@storybook/core-common';
+import { join } from 'path';
+import { normalizeStories, getProjectRoot } from '@storybook/core-common';
 import { getStorybookMain } from './getStorybookMain';
 
 export const getStorybookMetadata = () => {
-  const workingDir = resolve();
+  const workingDir = getProjectRoot();
   const configDir = process.env.STORYBOOK_CONFIG_DIR;
 
   const main = getStorybookMain(configDir);
@@ -17,7 +17,7 @@ export const getStorybookMetadata = () => {
 
   const storiesPaths = normalizedStoriesEntries
     .map((entry) => entry.directory + '/' + entry.files)
-    .map((dir) => '<rootDir>/' + relative(workingDir, dir))
+    .map((dir) => join(workingDir, dir))
     .join(';');
 
   // @ts-ignore -- this is added in @storybook/[email protected], which we don't depend on

test-runner-jest.config.js

@@ -1,5 +1,8 @@
 // !!! This file is used as an override to the test-runner configuration for this repo only !!!
 // If you want to create your own override for your project, run test-storybook eject instead
+const path = require('path');
+// we override the path here so that when running the test-runner locally, it resolves to local files instead when calling require.resolve
+process.env.STORYBOOK_TEST_RUNNER_PATH = path.resolve(__dirname);
 
 const { getJestConfig } = require('./dist');