✨ add storybook v7 support

.github/workflows/lint.yml

@@ -12,12 +12,12 @@ jobs:
       - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
       - uses: actions/cache@v3
         with:
           path: node_modules
-          key: ${{ runner.os }}/node-14/${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}/node-14/
+          key: ${{ runner.os }}/node-16/${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}/node-16/
       - run: yarn
         env:
           PERCY_POSTINSTALL_BROWSER: true

.github/workflows/release.yml

@@ -9,7 +9,7 @@ jobs:
     - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac
     - uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 16
         registry-url: 'https://registry.npmjs.org'
     - run: yarn
     - run: yarn build

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14]
+        node: [16]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions-ecosystem/action-regex-match@v2

babel.config.cjs

@@ -3,7 +3,7 @@ module.exports = {
     ['@babel/env', {
       modules: false,
       targets: {
-        node: '14'
+        node: '16'
       }
     }]
   ],

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/percy/percy-storybook.git"
   },
   "engine": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "files": [
     "bin",
@@ -24,7 +24,7 @@
     "clean": "git clean -Xdf -e !node_modules -e !node_modules/**",
     "lint": "eslint --ignore-path .gitignore .",
     "readme": "percy-cli-readme",
-    "pretest": "build-storybook --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
+    "pretest": "storybook build --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
     "test": "yarn test:env jasmine --config=./test/jasmine.json",
     "test:env": "cross-env NODE_ENV=test NODE_OPTIONS='--loader=./test/loader.js'",
     "test:coverage": "nyc yarn test"
@@ -45,7 +45,8 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/eslint-plugin": "^7.19.1",
     "@babel/preset-env": "^7.22.9",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "^7.0.3",
@@ -61,6 +62,7 @@
     "nock": "^13.2.9",
     "nyc": "^15.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "storybook": "^7.5.0"
   }
 }

src/start.js

@@ -32,11 +32,11 @@ export const start = command('start', {
   let { default: { spawn } } = yield import('cross-spawn');
   let { host, port } = flags;
 
-  let args = ['--ci', `--host=${host}`, `--port=${port}`, ...argv];
-  log.info(`Running "start-storybook ${args.join(' ')}"`);
+  let args = ['dev', '--ci', `--host=${host}`, `--port=${port}`, ...argv];
+  log.info(`Running "storybook ${args.join(' ')}"`);
 
   let proc = yield new Promise((resolve, reject) => resolve(
-    spawn('start-storybook', args, { stdio: 'inherit' }).on('error', reject)
+    spawn('storybook', args, { stdio: 'inherit' }).on('error', reject)
   ));
 
   /* istanbul ignore next: this is a storybook flag we don't need to test */

src/utils.js

@@ -147,7 +147,10 @@ export async function* withPage(percy, url, callback, retry) {
 // Evaluate and return Storybook environment information from the about page
 /* istanbul ignore next: no instrumenting injected code */
 export function evalStorybookEnvironmentInfo({ waitForXPath }) {
-  return waitForXPath("//header[starts-with(text(), 'Storybook ')]", 5000)
+  let possibleEnvs = [];
+  possibleEnvs.push(waitForXPath("//header[starts-with(text(), 'Storybook ')]", 5000));
+  possibleEnvs.push(waitForXPath("//strong[starts-with(text(), 'You are on Storybook ')]", 5000));
+  return Promise.any(possibleEnvs)
     .then(el => `storybook/${el.innerText.match(/-?\d*\.?\d+/g).join('')}`)
     .catch(() => 'storybook/unknown');
 }
@@ -180,6 +183,9 @@ export function evalStorybookStorySnapshots({ waitFor }) {
   };
 
   return waitFor(async () => {
+    // uncache stories, if cached via storyStorev7: true
+    await (window.__STORYBOOK_PREVIEW__?.cacheAllCSFFiles?.() ||
+      window.__STORYBOOK_STORY_STORE__?.cacheAllCSFFiles?.());
     // use newer storybook APIs before old APIs
     await (window.__STORYBOOK_PREVIEW__?.extract?.() ||
            window.__STORYBOOK_STORY_STORE__?.extract?.());

test/.storybook/main.js

@@ -2,5 +2,9 @@ module.exports = {
   stories: ['*.stories.js'],
   features: {
     postcss: false
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   }
 };

test/storybook-start.test.js

@@ -27,7 +27,7 @@ describe('percy storybook:start', () => {
     ] : []);
 
     expect(logger.stdout).toEqual(jasmine.arrayContaining([
-      `[percy] Running "start-storybook --ci --host=localhost --port=9000 ${args.join(' ')}"`,
+      `[percy] Running "storybook dev --ci --host=localhost --port=9000 ${args.join(' ')}"`,
       '[percy] Percy has started!',
       '[percy] Snapshot taken: Snapshot: First',
       '[percy] Snapshot taken: Snapshot: Second',
@@ -51,7 +51,7 @@ describe('percy storybook:start', () => {
     await expectAsync(start([...args])).toBeRejectedWithError('FAKE ENOENT');
 
     expect(logger.stdout).toEqual([
-      `[percy] Running "start-storybook --ci --host=localhost --port=9000 ${args.join(' ')}"`
+      `[percy] Running "storybook dev --ci --host=localhost --port=9000 ${args.join(' ')}"`
     ]);
     expect(logger.stderr).toEqual([
       '[percy] Error: FAKE ENOENT'

test/storybook.test.js

@@ -16,7 +16,8 @@ describe('percy storybook', () => {
       default: () => [200, 'text/html', '<p>Not Storybook</p>']
     });
 
-    proc = spawn('start-storybook', [
+    proc = spawn('storybook', [
+      'dev',
       '--config-dir=./test/.storybook',
       '--port=9000',
       '--ci'