chore: Update package.json, src/config/jest-playwright.ts, src/csf/tr…

…ansformCsf.ts, src/playwright/transformPlaywrightJson.ts, and src/typings.d.ts

- Update package.json to include new dependencies or update existing ones.
- Modify src/config/jest-playwright.ts to configure Jest with Playwright.
- Refactor src/csf/transformCsf.ts to improve code readability and maintainability.
- Update src/playwright/transformPlaywrightJson.ts to handle new Playwright JSON format.
- Update src/typings.d.ts to include new type definitions or modify existing ones.

package.json

@@ -53,7 +53,6 @@
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@jest/types": "^29.6.3",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-essentials": "^7.3.0",
     "@storybook/addon-interactions": "^7.3.0",
@@ -96,6 +95,7 @@
     "@babel/generator": "^7.22.5",
     "@babel/template": "^7.22.5",
     "@babel/types": "^7.22.5",
+    "@jest/types": "^29.6.3",
     "@storybook/core-common": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
     "@storybook/csf": "^0.1.1",
     "@storybook/csf-tools": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",

src/config/jest-playwright.ts

@@ -1,7 +1,8 @@
 import path from 'path';
 import { getProjectRoot } from '@storybook/core-common';
+import type { Config } from '@jest/types';
 
-const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH || '@storybook/test-runner';
+const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
 
 /**
  * IMPORTANT NOTE:
@@ -15,7 +16,7 @@ const TEST_RUNNER_PATH = process.env.STORYBOOK_TEST_RUNNER_PATH || '@storybook/t
  * 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 getJestPlaywrightConfig = (): Config.InitialOptions => {
   const presetBasePath = path.dirname(
     require.resolve('jest-playwright-preset', {
       paths: [path.join(__dirname, '../node_modules')],
@@ -28,18 +29,18 @@ const getJestPlaywrightConfig = () => {
   );
   return {
     runner: path.join(presetBasePath, 'runner.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'),
+    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: [
-      require.resolve(TEST_RUNNER_PATH + '/playwright/jest-setup.js'),
+      require.resolve(`${TEST_RUNNER_PATH}/playwright/jest-setup.js`),
       expectPlaywrightPath,
       path.join(presetBasePath, 'lib', 'extends.js'),
     ],
   };
 };
 
-export const getJestConfig = () => {
+export const getJestConfig = (): Config.InitialOptions => {
   const {
     TEST_ROOT,
     TEST_MATCH,
@@ -69,16 +70,16 @@ export const getJestConfig = () => {
 
   const reporters = STORYBOOK_JUNIT ? ['default', jestJunitPath] : ['default'];
 
-  const testMatch = (STORYBOOK_STORIES_PATTERN && STORYBOOK_STORIES_PATTERN.split(';')) || [];
+  const testMatch = STORYBOOK_STORIES_PATTERN?.split(';') ?? [];
 
-  let config = {
+  const config: Config.InitialOptions = {
     rootDir: getProjectRoot(),
     roots: TEST_ROOT ? [TEST_ROOT] : undefined,
     reporters,
     testMatch,
     transform: {
       '^.+\\.(story|stories)\\.[jt]sx?$': require.resolve(
-        TEST_RUNNER_PATH + '/playwright/transform'
+        `${TEST_RUNNER_PATH}/playwright/transform`
       ),
       '^.+\\.[jt]sx?$': swcJestPath,
     },

src/csf/transformCsf.ts

@@ -58,7 +58,7 @@ const makePlayTest = (
   title: string,
   metaOrStoryPlay: t.Node,
   testPrefix?: TestPrefixer
-): t.Statement[] => {
+): t.ExpressionStatement[] => {
   return [
     t.expressionStatement(
       t.callExpression(t.identifier('it'), [
@@ -73,7 +73,7 @@ const makeDescribe = (
   key: string,
   tests: t.Statement[],
   beforeEachBlock?: t.ExpressionStatement
-): t.Statement | null => {
+): t.ExpressionStatement => {
   const blockStatements = beforeEachBlock ? [beforeEachBlock, ...tests] : tests;
   return t.expressionStatement(
     t.callExpression(t.identifier('describe'), [
@@ -108,13 +108,13 @@ export const transformCsf = (
   const storyExports = Object.keys(csf._stories);
   const title = csf.meta?.title;
 
-  const storyPlays = storyExports.reduce((acc, key) => {
+  const storyPlays = storyExports.reduce<Record<string, t.Node>>((acc, key) => {
     const annotations = csf._storyAnnotations[key];
     if (annotations?.play) {
       acc[key] = annotations.play;
     }
     return acc;
-  }, {} as Record<string, t.Node>);
+  }, {});
   const playTests = storyExports
     .map((key: string) => {
       let tests: t.Statement[] = [];

src/playwright/transformPlaywrightJson.ts

@@ -63,12 +63,12 @@ function v3TitleMapToV4TitleMap(titleIdToStories: Record<string, V3Story[]>) {
 }
 
 function groupByTitleId<T extends { title: ComponentTitle }>(entries: T[]) {
-  return entries.reduce((acc, entry) => {
+  return entries.reduce<Record<string, T[]>>((acc, entry) => {
     const titleId = toId(entry.title);
     acc[titleId] = acc[titleId] || [];
     acc[titleId].push(entry);
     return acc;
-  }, {} as { [key: string]: T[] });
+  }, {});
 }
 
 /**
@@ -88,18 +88,21 @@ export const transformPlaywrightJson = (index: V3StoriesIndex | V4Index | Unsupp
     throw new Error(`Unsupported version ${index.v}`);
   }
 
-  const titleIdToTest = Object.entries(titleIdToEntries).reduce((acc, [titleId, entries]) => {
-    const stories = entries.filter((s) => s.type !== 'docs');
-    if (stories.length) {
-      const storyTests = stories.map((story) => makeDescribe(story.name, [makeTest(story)]));
-      const program = t.program([makeDescribe(stories[0].title, storyTests)]) as babel.types.Node;
+  const titleIdToTest = Object.entries(titleIdToEntries).reduce<Record<string, string>>(
+    (acc, [titleId, entries]) => {
+      const stories = entries.filter((s) => s.type !== 'docs');
+      if (stories.length) {
+        const storyTests = stories.map((story) => makeDescribe(story.name, [makeTest(story)]));
+        const program = t.program([makeDescribe(stories[0].title, storyTests)]) as babel.types.Node;
 
-      const { code } = generate(program, {});
+        const { code } = generate(program, {});
 
-      acc[titleId] = code;
-    }
-    return acc;
-  }, {} as { [key: string]: string });
+        acc[titleId] = code;
+      }
+      return acc;
+    },
+    {}
+  );
 
   return titleIdToTest;
 };

src/typings.d.ts

@@ -1,7 +1,11 @@
 import { TestHook } from './playwright/hooks';
-
+import { type setupPage } from './setup-page';
+import type { StoryContext, StoryIdentifiers } from '@storybook/csf';
 declare global {
   var __sbPreRender: TestHook;
   var __sbPostRender: TestHook;
   var __getContext: (storyId: string) => any;
+  var __getContext: (storyId: string) => StoryContext | StoryIdentifiers;
+  var __sbSetupPage: typeof setupPage;
+  var __sbCollectCoverage: boolean;
 }