Merge pull request #217 from storybookjs/fix/setup-page-not-defined

Make setup-page globally available for index.json mode compatibility
storybookjs · Nov 18, 2022 · 87eb771 · 87eb771
2 parents 6d41927 + 4cf13f8
commit 87eb771
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -118,7 +118,6 @@
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "expect-playwright": "^0.8.0",
-    "global": "^4.4.0",
     "jest": "^28.0.0",
     "jest-environment-node":"^28.0.0",
     "jest-circus":"^28.0.0",

diff --git a/playwright/jest-setup.js b/playwright/jest-setup.js
@@ -1,4 +1,4 @@
-const { getTestRunnerConfig, setPreRender, setPostRender } = require('../dist/cjs');
+const { getTestRunnerConfig, setPreRender, setPostRender, setupPage } = require('../dist/cjs');
 
 const testRunnerConfig = getTestRunnerConfig(process.env.STORYBOOK_CONFIG_DIR);
 if (testRunnerConfig) {
@@ -13,4 +13,7 @@ if (testRunnerConfig) {
   }
 }
 
-global.__sbCollectCoverage = process.env.STORYBOOK_COLLECT_COVERAGE === 'true';
+// If the transformed tests need a dependency, it has to be globally available
+// in order to work both in defaul (file transformation) and stories/index.json mode.
+globalThis.__sbSetupPage = setupPage;
+globalThis.__sbCollectCoverage = process.env.STORYBOOK_COLLECT_COVERAGE === 'true';
diff --git a/src/csf/transformCsf.ts b/src/csf/transformCsf.ts
@@ -5,8 +5,6 @@ import generate from '@babel/generator';
 import { toId, storyNameFromExport } from '@storybook/csf';
 import dedent from 'ts-dedent';
 
-const logger = console;
-
 export interface TestContext {
   storyExport?: t.Identifier;
   name: t.Literal;
@@ -19,7 +17,6 @@ export type TestPrefixer = (context: TestContext) => TemplateResult;
 
 interface TransformOptions {
   clearBody?: boolean;
-  filePrefixer?: FilePrefixer;
   beforeEachPrefixer?: FilePrefixer;
   testPrefixer?: TestPrefixer;
   insertTestIfEmpty?: boolean;
@@ -87,7 +84,6 @@ const makeArray = (templateResult: TemplateResult) =>
 export const transformCsf = (
   code: string,
   {
-    filePrefixer,
     clearBody = false,
     testPrefixer,
     beforeEachPrefixer,
@@ -124,11 +120,6 @@ export const transformCsf = (
 
   let result = '';
 
-  // FIXME: insert between imports
-  if (filePrefixer) {
-    const { code: prefixCode } = generate(t.program(makeArray(filePrefixer())), {});
-    result = `${prefixCode}\n`;
-  }
   if (!clearBody) result = `${result}${code}\n`;
   if (allTests.length) {
     const describe = makeDescribe(

diff --git a/src/playwright/hooks.ts b/src/playwright/hooks.ts
@@ -1,4 +1,3 @@
-import global from 'global';
 import type { Page } from 'playwright';
 import type { StoryContext } from '@storybook/csf';
 
@@ -17,11 +16,11 @@ export interface TestRunnerConfig {
 }
 
 export const setPreRender = (preRender: TestHook) => {
-  global.__sbPreRender = preRender;
+  globalThis.__sbPreRender = preRender;
 };
 
 export const setPostRender = (postRender: TestHook) => {
-  global.__sbPostRender = postRender;
+  globalThis.__sbPostRender = postRender;
 };
 
 export const getStoryContext = async (page: Page, context: TestContext): Promise<StoryContext> => {

diff --git a/src/playwright/transformPlaywright.test.ts b/src/playwright/transformPlaywright.test.ts
@@ -47,12 +47,6 @@ describe('Playwright', () => {
         filename
       )
     ).toMatchInlineSnapshot(`
-      import global from 'global';
-
-      const {
-        setupPage
-      } = require('@storybook/test-runner');
-
       if (!require.main) {
         describe("Example/foo/bar", () => {
           describe("A", () => {
@@ -73,8 +67,8 @@ describe('Playwright', () => {
                   });
                 });
         
-                if (global.__sbPreRender) {
-                  await global.__sbPreRender(page, context);
+                if (globalThis.__sbPreRender) {
+                  await globalThis.__sbPreRender(page, context);
                 }
         
                 const result = await page.evaluate(({
@@ -84,11 +78,11 @@ describe('Playwright', () => {
                   id: "example-foo-bar--a"
                 });
         
-                if (global.__sbPostRender) {
-                  await global.__sbPostRender(page, context);
+                if (globalThis.__sbPostRender) {
+                  await globalThis.__sbPostRender(page, context);
                 }
         
-                if (global.__sbCollectCoverage) {
+                if (globalThis.__sbCollectCoverage) {
                   const isCoverageSetupCorrectly = await page.evaluate(() => '__coverage__' in window);
         
                   if (!isCoverageSetupCorrectly) {
@@ -107,8 +101,9 @@ describe('Playwright', () => {
                 await testFn();
               } catch (err) {
                 if (err.toString().includes('Execution context was destroyed')) {
+                  console.log(\`An error occurred in the following story, most likely because of a navigation: "\${"Example/foo/bar"}/\${"A"}". Retrying...\`);
                   await jestPlaywright.resetPage();
-                  await setupPage(global.page);
+                  await globalThis.__sbSetupPage(globalThis.page);
                   await testFn();
                 } else {
                   throw err;
@@ -130,12 +125,6 @@ describe('Playwright', () => {
         filename
       )
     ).toMatchInlineSnapshot(`
-      import global from 'global';
-
-      const {
-        setupPage
-      } = require('@storybook/test-runner');
-
       if (!require.main) {
         describe("Example/foo/bar", () => {
           describe("A", () => {
@@ -156,8 +145,8 @@ describe('Playwright', () => {
                   });
                 });
         
-                if (global.__sbPreRender) {
-                  await global.__sbPreRender(page, context);
+                if (globalThis.__sbPreRender) {
+                  await globalThis.__sbPreRender(page, context);
                 }
         
                 const result = await page.evaluate(({
@@ -167,11 +156,11 @@ describe('Playwright', () => {
                   id: "example-foo-bar--a"
                 });
         
-                if (global.__sbPostRender) {
-                  await global.__sbPostRender(page, context);
+                if (globalThis.__sbPostRender) {
+                  await globalThis.__sbPostRender(page, context);
                 }
         
-                if (global.__sbCollectCoverage) {
+                if (globalThis.__sbCollectCoverage) {
                   const isCoverageSetupCorrectly = await page.evaluate(() => '__coverage__' in window);
         
                   if (!isCoverageSetupCorrectly) {
@@ -190,8 +179,9 @@ describe('Playwright', () => {
                 await testFn();
               } catch (err) {
                 if (err.toString().includes('Execution context was destroyed')) {
+                  console.log(\`An error occurred in the following story, most likely because of a navigation: "\${"Example/foo/bar"}/\${"A"}". Retrying...\`);
                   await jestPlaywright.resetPage();
-                  await setupPage(global.page);
+                  await globalThis.__sbSetupPage(globalThis.page);
                   await testFn();
                 } else {
                   throw err;
@@ -214,12 +204,6 @@ describe('Playwright', () => {
         filename
       )
     ).toMatchInlineSnapshot(`
-      import global from 'global';
-
-      const {
-        setupPage
-      } = require('@storybook/test-runner');
-
       if (!require.main) {
         describe("Example/Header", () => {
           describe("A", () => {
@@ -240,8 +224,8 @@ describe('Playwright', () => {
                   });
                 });
         
-                if (global.__sbPreRender) {
-                  await global.__sbPreRender(page, context);
+                if (globalThis.__sbPreRender) {
+                  await globalThis.__sbPreRender(page, context);
                 }
         
                 const result = await page.evaluate(({
@@ -251,11 +235,11 @@ describe('Playwright', () => {
                   id: "example-header--a"
                 });
         
-                if (global.__sbPostRender) {
-                  await global.__sbPostRender(page, context);
+                if (globalThis.__sbPostRender) {
+                  await globalThis.__sbPostRender(page, context);
                 }
         
-                if (global.__sbCollectCoverage) {
+                if (globalThis.__sbCollectCoverage) {
                   const isCoverageSetupCorrectly = await page.evaluate(() => '__coverage__' in window);
         
                   if (!isCoverageSetupCorrectly) {
@@ -274,8 +258,9 @@ describe('Playwright', () => {
                 await testFn();
               } catch (err) {
                 if (err.toString().includes('Execution context was destroyed')) {
+                  console.log(\`An error occurred in the following story, most likely because of a navigation: "\${"Example/Header"}/\${"A"}". Retrying...\`);
                   await jestPlaywright.resetPage();
-                  await setupPage(global.page);
+                  await globalThis.__sbSetupPage(globalThis.page);
                   await testFn();
                 } else {
                   throw err;

diff --git a/src/playwright/transformPlaywright.ts b/src/playwright/transformPlaywright.ts
@@ -7,11 +7,6 @@ import { transformCsf } from '../csf/transformCsf';
 import type { TestPrefixer } from '../csf/transformCsf';
 import dedent from 'ts-dedent';
 
-const filePrefixer = template(`
-  import global from 'global';
-  const { setupPage } = require('@storybook/test-runner');
-`);
-
 const coverageErrorMessage = dedent`
   [Test runner] An error occurred when evaluating code coverage:
   The code in this story is not instrumented, which means the coverage setup is likely not correct.
@@ -29,19 +24,19 @@ export const testPrefixer = template(
           page.evaluate(({ id, err }) => __throwError(id, err), { id: %%id%%, err: err.message });
         });
 
-        if(global.__sbPreRender) {
-          await global.__sbPreRender(page, context);
+        if(globalThis.__sbPreRender) {
+          await globalThis.__sbPreRender(page, context);
         }
 
         const result = await page.evaluate(({ id, hasPlayFn }) => __test(id, hasPlayFn), {
           id: %%id%%,
         });
   
-        if(global.__sbPostRender) {
-          await global.__sbPostRender(page, context);
+        if(globalThis.__sbPostRender) {
+          await globalThis.__sbPostRender(page, context);
         }
 
-        if(global.__sbCollectCoverage) {
+        if(globalThis.__sbCollectCoverage) {
           const isCoverageSetupCorrectly = await page.evaluate(() => '__coverage__' in window);
           if (!isCoverageSetupCorrectly) {
             throw new Error(\`${coverageErrorMessage}\`);
@@ -57,8 +52,9 @@ export const testPrefixer = template(
         await testFn();
       } catch(err) {
         if(err.toString().includes('Execution context was destroyed')) {
+          console.log(\`An error occurred in the following story, most likely because of a navigation: "\${%%title%%}/\${%%name%%}". Retrying...\`);
           await jestPlaywright.resetPage();
-          await setupPage(global.page);
+          await globalThis.__sbSetupPage(globalThis.page);
           await testFn();
         } else {
           throw err;
@@ -80,7 +76,6 @@ const makeTitleFactory = (filename: string) => {
 
 export const transformPlaywright = (src: string, filename: string) => {
   const result = transformCsf(src, {
-    filePrefixer,
     testPrefixer,
     insertTestIfEmpty: true,
     clearBody: true,