Merge pull request #458 from storybookjs/release/0.18.0

Release 0.18.0

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,39 @@
+name: Bug report 🐞
+description: >-
+  Something is broken and you have a reliable reproduction? Let us know here.
+  For questions, please use "Question" below.
+title: '[Bug]: '
+labels:
+  - needs triage
+  - bug
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: To Reproduce
+      description: >-
+        Due to the high volume of reports we receive, we can only prioritize bug reports that include a clear reproduction of the problem. Please use [storybook.new](https://storybook.new) to create one, and consult our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) for guidance. Thank you for your understanding!
+      placeholder: >-
+        Please provide a link to your reproduction here. If creating a reproduction really isn't feasible, let us know and be sure to include as much detail as you can to help us understand the issue. 
+    validations:
+      required: true
+  - type: textarea
+    id: system
+    attributes:
+      label: System
+      description: Please paste the results of `npx storybook@latest info` here.
+      render: bash
+    validations:
+      required: true
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,41 @@
+name: Feature request 🚀
+description: >-
+  Suggest a feature idea for this project.
+title: '[Feature request]: '
+labels:
+  - needs triage
+  - feature request
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Is your feature request related to a problem? Please describe.
+      description: >-
+        A clear and concise description of the problem. E.g. I'm always
+        frustrated when [...]
+  - type: textarea
+    id: describe
+    attributes:
+      label: Describe the solution you'd like
+      description: What would you like to see added to Storybook to solve problem?
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you've considered
+      description: Any alternative solutions or features you've considered.
+  - type: dropdown
+    id: help
+    attributes:
+      label: Are you able to assist to bring the feature to reality?
+      options:
+        - 'no'
+        - yes, I can
+    validations:
+      required: true
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.

README.md

@@ -156,6 +156,7 @@ Usage: test-storybook [options]
 | `--url`                           | Define the URL to run tests in. Useful for custom Storybook URLs <br/>`test-storybook --url http://the-storybook-url-here.com`                                                |
 | `--browsers`                      | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit <br/>`test-storybook --browsers firefox chromium`                                              |
 | `--maxWorkers [amount]`           | Specifies the maximum number of workers the worker-pool will spawn for running tests <br/>`test-storybook --maxWorkers=2`                                                     |
+| `--testTimeout [number]`          | This option sets the default timeouts of test cases <br/>`test-storybook --testTimeout=15_000`                                                                                |
 | `--no-cache`                      | Disable the cache <br/>`test-storybook --no-cache`                                                                                                                            |
 | `--clearCache`                    | Deletes the Jest cache directory and then exits without running tests <br/>`test-storybook --clearCache`                                                                      |
 | `--verbose`                       | Display individual test results with the test suite hierarchy <br/>`test-storybook --verbose`                                                                                 |
@@ -173,7 +174,7 @@ Usage: test-storybook [options]
 
 ## Ejecting configuration
 
-The test runner is based on [Jest](https://jestjs.io/) and will accept most of the [CLI options](https://jestjs.io/docs/cli) that Jest does, like `--watch`, `--watchAll`, `--maxWorkers`, etc. It works out of the box, but if you want better control over its configuration, you can eject its configuration by running `test-storybook --eject` to create a local `test-runner-jest.config.js` file in the root folder of your project. This file will be used by the test runner.
+The test runner is based on [Jest](https://jestjs.io/) and will accept most of the [CLI options](https://jestjs.io/docs/cli) that Jest does, like `--watch`, `--watchAll`, `--maxWorkers`, `--testTimeout`, etc. It works out of the box, but if you want better control over its configuration, you can eject its configuration by running `test-storybook --eject` to create a local `test-runner-jest.config.js` file in the root folder of your project. This file will be used by the test runner.
 
 > **Note**
 > The `test-runner-jest.config.js` file can be placed inside of your Storybook config dir as well. If you pass the `--config-dir` option, the test-runner will look for the config file there as well.
@@ -350,10 +351,10 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.deployment_status.state == 'success'
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14.x'
+          node-version: '18.x'
       - name: Install dependencies
         run: yarn
       - name: Run Storybook tests
@@ -385,10 +386,10 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '14.x'
+          node-version: '18.x'
       - name: Install dependencies
         run: yarn
       - name: Run Storybook tests
@@ -1018,6 +1019,12 @@ In either way, to fix it you should limit the amount of workers that run in para
 }
 ```
 
+Another option is trying to increase the test timeout by passing the [--testTimeout](https://jestjs.io/docs/cli#--testtimeoutnumber) option to your command (adding `--testTimeout=60_000` will increase test timeouts to 1 minute):
+
+```json
+"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2 --testTimeout=60_000\""
+```
+
 #### The test runner reports "No tests found" running on a Windows CI
 
 There is currently a [bug](https://github.com/facebook/jest/issues/8536) in Jest which means tests cannot be on a separate drive than the project. To work around this you will need to set the `TEMP` environment variable to a temporary folder on the same drive as your project. Here's what that would look like on GitHub Actions:

package.json

@@ -71,10 +71,11 @@
     "jest-runner": "^29.6.4",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.0.0",
+    "nyc": "^15.1.0",
     "playwright": "^1.14.0"
   },
   "devDependencies": {
-    "@auto-it/released": "^11.1.1",
+    "@auto-it/released": "^11.1.6",
     "@babel/cli": "^7.12.1",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
@@ -89,14 +90,13 @@
     "@types/node": "^16.4.1",
     "@types/node-fetch": "^2.6.11",
     "@vitejs/plugin-react": "^4.0.3",
-    "auto": "^11.1.1",
+    "auto": "^11.1.6",
     "babel-jest": "^29.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "can-bind-to-host": "^1.1.1",
     "commander": "^9.0.0",
     "concurrently": "^7.0.0",
-    "detect-package-manager": "^3.0.1",
     "glob": "^10.2.2",
     "husky": "^8.0.0",
     "jest-image-snapshot": "^6.2.0",
@@ -107,8 +107,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "read-pkg-up": "^7.0.1",
-    "rimraf": "^3.0.2",
-    "semver": "^7.5.4",
     "storybook": "^8.0.0",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0",

src/test-storybook.ts

@@ -7,8 +7,6 @@ import canBindToHost from 'can-bind-to-host';
 import dedent from 'ts-dedent';
 import path from 'path';
 import tempy from 'tempy';
-import semver from 'semver';
-import { detect as detectPackageManager } from 'detect-package-manager';
 
 import { JestOptions, getCliOptions } from './util/getCliOptions';
 import { getStorybookMetadata } from './util/getStorybookMetadata';
@@ -48,38 +46,11 @@ const cleanup = () => {
   }
 };
 
-// Inspired by github.com/nrwl/nx/blob/1975181c200eb288221c8beb94e268fe9659cc26/packages/nx/src/utils/package-manager.ts#L48-106
-async function getExecutorCommand() {
-  const commands = {
-    npm: () => 'npx',
-    pnpm: () => {
-      const pnpmVersion = getPackageManagerVersion('pnpm');
-      const useExec = semver.gte(pnpmVersion, '6.13.0');
-
-      return useExec ? 'pnpm exec' : 'pnpx';
-    },
-    yarn: () => {
-      const yarnVersion = getPackageManagerVersion('yarn');
-      const useBerry = semver.gte(yarnVersion, '2.0.0');
-      return useBerry ? 'yarn exec' : 'yarn';
-    },
-  };
-
-  try {
-    let packageManager = await detectPackageManager();
-    if (packageManager === 'bun') {
-      packageManager = 'npm';
-    }
-
-    return commands[packageManager]();
-  } catch (err) {
-    return commands.npm();
-  }
-}
-
-// Copied from https://github.com/nrwl/nx/blob/1975181c200eb288221c8beb94e268fe9659cc26/packages/nx/src/utils/package-manager.ts#L113-L117
-function getPackageManagerVersion(packageManager: 'npm' | 'pnpm' | 'yarn') {
-  return execSync(`${packageManager} --version`).toString('utf-8').trim();
+function getNycBinPath() {
+  const nycPath = path.join(require.resolve('nyc/package.json'));
+  const nycBin = require(nycPath).bin.nyc;
+  const nycBinFullPath = path.join(path.dirname(nycPath), nycBin);
+  return nycBinFullPath;
 }
 
 async function reportCoverage() {
@@ -107,11 +78,12 @@ async function reportCoverage() {
   // --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
   if (process.env.JEST_SHARD !== 'true') {
-    const executorCommand = await getExecutorCommand();
+    const nycBinFullPath = getNycBinPath();
     execSync(
-      `${executorCommand} nyc report --reporter=text -t ${coverageFolder} --report-dir ${coverageFolder}`,
+      `${nycBinFullPath} report --reporter=text --reporter=lcov -t ${coverageFolder} --report-dir ${coverageFolder}`,
       {
         stdio: 'inherit',
+        cwd: process.cwd(),
       }
     );
   }

src/util/getParsedCliOptions.ts

@@ -39,6 +39,7 @@ export const getParsedCliOptions = (): ParsedCliOptions => {
       '--maxWorkers <amount>',
       'Specifies the maximum number of workers the worker-pool will spawn for running tests'
     )
+    .option('--testTimeout <number>', 'This option sets the default timeouts of test cases')
     .option('--no-cache', 'Disable the cache')
     .option('--clearCache', 'Deletes the Jest cache directory and then exits without running tests')
     .option('--verbose', 'Display individual test results with the test suite hierarchy')