Merge pull request #316 from storybookjs/future

Patch changes from `future` to `next`

.github/ISSUE_TEMPLATE/bug-report-🐞.md

@@ -0,0 +1,30 @@
+---
+name: "Bug report \U0001F41E"
+about: Create a report to help us improve
+title: "[bug] "
+labels: bug, needs triage
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**System**
+Please paste the results of `npx storybook@latest info` here.
+
+**Additional context**
+Add any other context about the problem here.

README.md

@@ -24,6 +24,7 @@ Storybook test runner turns all of your stories into executable tests.
     - [Manually configuring istanbul](#manually-configuring-istanbul)
   - [2 - Run tests with --coverage flag](#2---run-tests-with---coverage-flag)
   - [3 - Merging code coverage with coverage from other tools](#3---merging-code-coverage-with-coverage-from-other-tools)
+  - [4 - Run tests with --shard flag](#4---run-tests-with---shard-flag)
 - [Experimental test hook API](#experimental-test-hook-api)
   - [prepare](#prepare)
   - [getHttpHeaders](#gethttpheaders)
@@ -416,6 +417,62 @@ Here's an example on how to achieve that:
 > **Note**
 > If your other tests (e.g. Jest) are using a different coverageProvider than `babel`, you will have issues when merging the coverage files. [More info here](#merging-test-coverage-results-in-wrong-coverage).
 
+### 4 - Run tests with --shard flag
+
+The test-runner collects all coverage in one file `coverage/storybook/coverage-storybook.json`. To split the coverage file you should rename it using the `shard-index`. To report the coverage you should merge the coverage files with the nyc merge command.
+
+Github CI example:
+
+```yml
+test:
+  name: Running Test-storybook (${{ matrix.shard }})
+  strategy:
+    matrix:
+      shard: [1, 2, 3, 4]
+  steps:
+    - name: Testing storybook
+      run: yarn test-storybook --coverage --shard=${{ matrix.shard }}/${{ strategy.job-total }}
+    - name: Renaming coverage file
+      uses: mv coverage/storybook/coverage-storybook.json coverage/storybook/coverage-storybook-${matrix.shard}.json
+report-coverage:
+  name: Reporting storybook coverage
+  steps:
+    - name: Merging coverage
+      uses: yarn nyc merge coverage/storybook merged-output/merged-coverage.json
+    - name: Report coverage
+      uses: yarn nyc report --reporter=text -t merged-output --report-dir merged-output
+```
+
+Circle CI example:
+
+```yml
+test:
+  parallelism: 4
+  steps:
+    - run:
+        command: yarn test-storybook --coverage --shard=$(expr $CIRCLE_NODE_INDEX + 1)/$CIRCLE_NODE_TOTAL
+        command: mv coverage/storybook/coverage-storybook.json coverage/storybook/coverage-storybook-${CIRCLE_NODE_INDEX + 1}.json
+report-coverage:
+  steps:
+    - run:
+        command: yarn nyc merge coverage/storybook merged-output/merged-coverage.json
+        command: yarn nyc report --reporter=text -t merged-output --report-dir merged-output
+```
+
+Gitlab CI example:
+
+```yml
+test:
+  parallel: 4
+  script:
+    - yarn test-storybook --coverage --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL
+    - mv coverage/storybook/coverage-storybook.json coverage/storybook/coverage-storybook-${CI_NODE_INDEX}.json
+report-coverage:
+  script:
+    - yarn nyc merge coverage/storybook merged-output/merged-coverage.json
+    - yarn nyc report --reporter=text -t merged-output --report-dir merged-output
+```
+
 ## Experimental test hook API
 
 The test runner renders a story and executes its [play function](https://storybook.js.org/docs/react/writing-stories/play-function) if one exists. However, there are certain behaviors that are not possible to achieve via the play function, which executes in the browser. For example, if you want the test runner to take visual snapshots for you, this is something that is possible via Playwright/Jest, but must be executed in Node.

package.json

@@ -98,20 +98,20 @@
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   },
   "dependencies": {
-    "@babel/core": "^7.20.7",
-    "@babel/generator": "^7.18.13",
-    "@babel/types": "^7.14.8",
-    "@babel/template": "^7.14.5",
-    "@storybook/core-common": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@storybook/csf": "^0.1.0",
-    "@storybook/csf-tools": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@storybook/preview-api": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
+    "@babel/core": "^7.22.5",
+    "@babel/generator": "^7.22.5",
+    "@babel/types": "^7.22.5",
+    "@babel/template": "^7.22.5",
+    "@storybook/core-common": "next",
+    "@storybook/csf": "^0.1.1",
+    "@storybook/csf-tools": "next",
+    "@storybook/preview-api": "next",
     "@swc/core": "^1.3.18",
     "@swc/jest": "^0.2.23",
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "expect-playwright": "^0.8.0",
-    "glob": "^8.1.0",
+    "glob": "^10.2.2",
     "jest": "^28.0.0",
     "jest-circus": "^28.0.0",
     "jest-environment-node": "^28.0.0",
@@ -129,7 +129,8 @@
   "auto": {
     "prereleaseBranches": [
       "next",
-      "prerelease"
+      "prerelease",
+      "future"
     ],
     "plugins": [
       "npm",

playwright/custom-environment.js

@@ -1,6 +1,5 @@
 const { setupPage } = require('../dist/setup-page');
 
-require('regenerator-runtime/runtime');
 const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
 
 class CustomEnvironment extends PlaywrightEnvironment {

playwright/test-runner-jest.config.js

@@ -1,5 +1,8 @@
 const { getJestConfig } = require('@storybook/test-runner');
 
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
 module.exports = {
   // The default configuration comes from @storybook/test-runner
   ...getJestConfig(),

src/test-storybook.ts

@@ -15,15 +15,7 @@ import { getStorybookMetadata } from './util/getStorybookMetadata';
 import { getTestRunnerConfig } from './util/getTestRunnerConfig';
 import { transformPlaywrightJson } from './playwright/transformPlaywrightJson';
 
-import glob_og from 'glob';
-
-const glob = function (pattern: string, options?: any): Promise<string[]> {
-  return new Promise((resolve, reject) => {
-    glob_og(pattern, options, (err: any, files: string[]) =>
-      err === null ? resolve(files) : reject(err)
-    );
-  });
-};
+import { glob } from 'glob';
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'test';
@@ -58,12 +50,7 @@ const cleanup = () => {
   }
 };
 
-let isWatchMode = false;
 async function reportCoverage() {
-  if (isWatchMode || process.env.STORYBOOK_COLLECT_COVERAGE !== 'true') {
-    return;
-  }
-
   const coverageFolderE2E = path.resolve(process.cwd(), '.nyc_output');
   const coverageFolder = path.resolve(process.cwd(), 'coverage/storybook');
 
@@ -84,14 +71,18 @@ async function reportCoverage() {
   // --skip-full in case we only want to show not fully covered code
   // --check-coverage if we want to break if coverage reaches certain threshold
   // .nycrc will be respected for thresholds etc. https://www.npmjs.com/package/nyc#coverage-thresholds
-  execSync(`npx nyc report --reporter=text -t ${coverageFolder} --report-dir ${coverageFolder}`, {
-    stdio: 'inherit',
-  });
+  if (process.env.JEST_SHARD !== 'true') {
+    execSync(`npx nyc report --reporter=text -t ${coverageFolder} --report-dir ${coverageFolder}`, {
+      stdio: 'inherit',
+    });
+  }
 }
 
 const onProcessEnd = () => {
   cleanup();
-  reportCoverage();
+  if (process.env.STORYBOOK_COLLECT_COVERAGE !== 'true') {
+    reportCoverage();
+  }
 };
 
 process.on('SIGINT', onProcessEnd);
@@ -132,8 +123,8 @@ async function executeJestPlaywright(args: JestOptions) {
   const configDir = process.env.STORYBOOK_CONFIG_DIR || '';
   const [userDefinedJestConfig] = (
     await Promise.all([
-      glob(path.join(configDir, 'test-runner-jest*')),
-      glob(path.join('test-runner-jest*')),
+      glob(path.join(configDir, 'test-runner-jest*'), { windowsPathsNoEscape: true }),
+      glob(path.join('test-runner-jest*'), { windowsPathsNoEscape: true }),
     ])
   ).reduce((a, b) => a.concat(b), []);
 
@@ -256,7 +247,7 @@ const main = async () => {
   }
 
   // set this flag to skip reporting coverage in watch mode
-  isWatchMode = jestOptions.watch || jestOptions.watchAll;
+  const isWatchMode = jestOptions.includes('--watch') || jestOptions.includes('--watchAll');
 
   const rawTargetURL = process.env.TARGET_URL || runnerOptions.url || 'http://127.0.0.1:6006';
   await checkStorybook(rawTargetURL);
@@ -265,7 +256,7 @@ const main = async () => {
 
   process.env.TARGET_URL = targetURL;
 
-  if (runnerOptions.coverage) {
+  if (!isWatchMode && runnerOptions.coverage) {
     process.env.STORYBOOK_COLLECT_COVERAGE = 'true';
   }
 
@@ -277,6 +268,10 @@ const main = async () => {
     process.env.REFERENCE_URL = sanitizeURL(process.env.REFERENCE_URL);
   }
 
+  if (jestOptions.includes('--shard')) {
+    process.env.JEST_SHARD = 'true';
+  }
+
   // Use TEST_BROWSERS if set, otherwise get from --browser option
   if (!process.env.TEST_BROWSERS && runnerOptions.browsers) {
     if (Array.isArray(runnerOptions.browsers))