use git root as jest root to allow for externally imported stories

storybookjs · Aug 3, 2023 · 8a745f5 · 8a745f5
1 parent 848d743
commit 8a745f5
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
diff --git a/src/config/jest-playwright.ts b/src/config/jest-playwright.ts
@@ -1,4 +1,5 @@
 import path from 'path';
+import { getProjectRoot } from '@storybook/core-common';
 
 /**
  * IMPORTANT NOTE:
@@ -25,11 +26,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('@storybook/test-runner/playwright/global-setup.js'),
+    globalTeardown: require.resolve('@storybook/test-runner/playwright/global-teardown.js'),
+    testEnvironment: require.resolve('@storybook/test-runner/playwright/custom-environment.js'),
     setupFilesAfterEnv: [
-      '@storybook/test-runner/playwright/jest-setup.js',
+      require.resolve('@storybook/test-runner/playwright/jest-setup.js'),
       expectPlaywrightPath,
       path.join(presetBasePath, 'lib', 'extends.js'),
     ],
@@ -67,26 +68,14 @@ export const getJestConfig = () => {
   const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
 
   const testMatch = (STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';')) || [];
-  const testRoots = new Set(['<rootDir>']);
-
-  testMatch.forEach((match) => {
-    // if any of the stories pattern contains <rootDir>/.. it means the user might be referencing
-    // stories outside of the project they're executing the test-runner from, e.g. monorepo
-    if (match.startsWith('<rootDir>/..')) {
-      const rootDirLevels = match.split('/..').length - 1;
-      // so we add those directories as roots to make sure jest can find the files
-      const rootDir = ['<rootDir>'].concat(Array(rootDirLevels).fill('..')).join(path.sep);
-      testRoots.add(rootDir);
-    }
-  });
 
   let config = {
-    rootDir: process.cwd(),
-    roots: TEST_ROOT ? [TEST_ROOT] : [...testRoots],
+    rootDir: getProjectRoot(),
+    roots: TEST_ROOT ? [TEST_ROOT] : undefined,
     reporters,
     testMatch,
     transform: {
-      '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
+      '^.+\\.stories\\.[jt]sx?$': require.resolve('@storybook/test-runner/playwright/transform'),
       '^.+\\.[jt]sx?$': swcJestPath,
     },
     snapshotSerializers: [jestSerializerHtmlPath],

diff --git a/src/playwright/transformPlaywright.test.ts b/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';

diff --git a/src/util/getStorybookMetadata.test.ts b/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)"`
     );
   });
 

diff --git a/src/util/getStorybookMetadata.ts b/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