Update storybook integration to support v8

chanzuckerberg · Mar 5, 2024 · 92f8df6 · 92f8df6
1 parent d063a34
commit 92f8df6
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [new] Support Storybook v8
+
 # 7.2.0 (2024-02-12)
 
 - [new] Add `config` parameter, which is passed to `axe.configure` [#88](https://github.com/chanzuckerberg/axe-storybook-testing/pull/88)

diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ This project adheres to the [Contributor Covenant code of conduct](https://www.c
 ## Minimum requirements
 
 - Node 12
-- Storybook 7.0 (for Storybook 6, use axe-storybook-testing v6.3.1)
+- Storybook 7.0 or 8.0 (for Storybook 6, use axe-storybook-testing v6.3.1)
 - axe-core 4.0
 
 ## Installation

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "zod": "^3.22.4"
   },
   "peerDependencies": {
-    "@storybook/preview-api": "^7.0.0 || ^8.0.0-rc.1",
+    "@storybook/preview-api": "^7.0.0 || ^8.0.0",
     "axe-core": "^4.0.0"
   },
   "devDependencies": {

diff --git a/src/browser/StorybookPage.ts b/src/browser/StorybookPage.ts
@@ -1,4 +1,4 @@
-import type {PreviewWeb} from '@storybook/preview-api';
+import type {PreviewWeb, StoryStore} from '@storybook/preview-api';
 import type {Renderer, StoryIdentifier, Parameters} from '@storybook/types';
 import pTimeout from 'p-timeout';
 import type {Page} from 'playwright';
@@ -72,9 +72,7 @@ function fetchStoriesFromWindow(): Promise<StorybookStory[]> {
     );
   }
 
-  const storyStore = storybookPreview.storyStore;
-
-  return storyStore.cacheAllCSFFiles().then(() => {
+  return storybookPreview.extract().then(() => {
     // Pick only the properties we need from Storybook's representation of a story.
     //
     // This is necessary because Playwright's `page.evaluate` requires return values to be JSON
@@ -96,6 +94,8 @@ function fetchStoriesFromWindow(): Promise<StorybookStory[]> {
       };
     }
 
+    const storyStore = storybookPreview.storyStore as StoryStore<Renderer>;
+
     return storyStore
       .raw()
       .map(pickOnlyNecessaryAndSerializableStoryProperties);