Skip to content

Commit

Permalink
Merge pull request #206 from storybookjs/next
Browse files Browse the repository at this point in the history 
Release 0.9.0
  • Loading branch information
@yannbf
yannbf committed Oct 12, 2022
2 parents 2c625cc + 957538d commit 33a868b
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 31 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/nightly.yml
View file
Expand Up @@ -129,7 +129,7 @@ jobs:
with:
run: |
yarn build
yarn test-storybook:ci-failures
! yarn test-storybook:ci-failures
- name: Process test results
if: ${{ always() }}
Expand Down
54 changes: 30 additions & 24 deletions README.md
View file
Expand Up @@ -111,26 +111,27 @@ yarn test-storybook
Usage: test-storybook [options]
```

| Options | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `--help` | Output usage information <br/>`test-storybook --help` |
| `-i`, `--index-json` | Run in index json mode. Automatically detected (requires a compatible Storybook) <br/>`test-storybook --index-json` |
| `--no-index-json` | Disables index json mode <br/>`test-storybook --no-index-json` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`test-storybook -c .storybook` |
| `--watch` | Watch files for changes and rerun tests related to changed files.<br/>`test-storybook --watch` |
| `--watchAll` | Watch files for changes and rerun all tests when something changes.<br/>`test-storybook --watchAll` |
| `--coverage` | Indicates that test coverage information should be collected and reported in the output <br/>`test-storybook --coverage` |
| `--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` |
| `--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` |
| `-u`, `--updateSnapshot` | Use this flag to re-record every snapshot that fails during this test run <br/>`test-storybook -u` |
| `--eject` | Creates a local configuration file to override defaults of the test-runner <br/>`test-storybook --eject` |
| `--json` | Prints the test results in JSON. This mode will send all other test output and user messages to stderr. <br/>`test-storybook --json` |
| `--outputFile` | Write test results to a file when the --json option is also specified. <br/>`test-storybook --json --outputFile results.json` |
| `--junit` | Indicates that test information should be reported in a junit file. <br/>`test-storybook --**junit**` |
| Options | Description |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--help` | Output usage information <br/>`test-storybook --help` |
| `-i`, `--index-json` | Run in index json mode. Automatically detected (requires a compatible Storybook) <br/>`test-storybook --index-json` |
| `--no-index-json` | Disables index json mode <br/>`test-storybook --no-index-json` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`test-storybook -c .storybook` |
| `--watch` | Watch files for changes and rerun tests related to changed files.<br/>`test-storybook --watch` |
| `--watchAll` | Watch files for changes and rerun all tests when something changes.<br/>`test-storybook --watchAll` |
| `--coverage` | Indicates that test coverage information should be collected and reported in the output <br/>`test-storybook --coverage` |
| `--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` |
| `--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` |
| `-u`, `--updateSnapshot` | Use this flag to re-record every snapshot that fails during this test run <br/>`test-storybook -u` |
| `--eject` | Creates a local configuration file to override defaults of the test-runner <br/>`test-storybook --eject` |
| `--json` | Prints the test results in JSON. This mode will send all other test output and user messages to stderr. <br/>`test-storybook --json` |
| `--outputFile` | Write test results to a file when the --json option is also specified. <br/>`test-storybook --json --outputFile results.json` |
| `--junit` | Indicates that test information should be reported in a junit file. <br/>`test-storybook --**junit**` |
| `--ci` | Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`. <br/>`test-storybook --ci` |

## Ejecting configuration

Expand Down Expand Up @@ -303,11 +304,11 @@ The test runner supports code coverage with the `--coverage` flag or `STORYBOOK_

### 1 - Instrument the code

Given that your components' code runs in the context of a real browser, they have to be instrumented so that the test runner is able to collect coverage. This is done by configuring [istanbul](https://istanbul.js.org/) in your Storybook. You can achieve that in two different ways:
Instrumenting the code is an important step, which allows lines of code to be tracked by Storybook. This is normally achieved by using instrumentation libraries such as the [Istanbul Babel plugin](https://github.com/istanbuljs/babel-plugin-istanbul), or its Vite counterpart. In Storybook, you can set up instrumentation in two different ways:

#### Using @storybook/addon-coverage

For select frameworks with Webpack (React, Preact, HTML, Web components and Vue) you can use the [@storybook/addon-coverage](https://github.com/storybookjs/addon-coverage) addon, which will automatically configure the plugin for you.
For select frameworks (React, Preact, HTML, Web components, Svelte and Vue) you can use the [@storybook/addon-coverage](https://github.com/storybookjs/addon-coverage) addon, which will automatically configure the plugin for you.

Install `@storybook/addon-coverage`:

Expand All @@ -325,11 +326,13 @@ module.exports = {
};
```

The addon has default options that might suffice to your project, however if you want to customize the addon you can see how it's done [here](https://github.com/storybookjs/addon-coverage#configuring-the-addon).
The addon has default options that might suffice for your project, and it accepts an [options object for project-specific configuration](https://github.com/storybookjs/addon-coverage#configuring-the-addon).

#### Manually configuring istanbul

Some frameworks or Storybook builders (e.g. Vite) might not automatically accept babel plugins. In that case, you will have to manually configure whatever flavor of [istanbul](https://istanbul.js.org/) (Rollup, Vite, Webpack loader) your project might require. You can find recipes in [this repository](https://github.com/yannbf/storybook-coverage-recipes) that include many different configurations and steps on how to set up coverage in each of them.
If your framework does not use Babel or Vite, such as Angular, you will have to manually configure whatever flavor of [Istanbul](https://istanbul.js.org/) (Webpack loader, etc.) your project might require. Also, if your project uses Vue or Svelte, you will need to add one extra configuration for nyc.

You can find recipes in [this repository](https://github.com/yannbf/storybook-coverage-recipes) that include many different configurations and steps on how to set up coverage in each of them.

### 2 - Run tests with --coverage flag

Expand All @@ -343,6 +346,9 @@ The test runner will report the results in the CLI and generate a `coverage/stor

![](.github/assets/coverage-result.png)

> **Note**
> If your components are not shown in the report and you're using Vue or Svelte, it's probably because you're missing a .nycrc.json file to specify the file extensions. Use the [recipes](https://github.com/yannbf/storybook-coverage-recipes) for reference on how to set that up.
If you want to generate coverage reports with [different reporters](https://istanbul.js.org/docs/advanced/alternative-reporters/), you can use `nyc` and point it to the folder which contains the Storybook coverage file. `nyc` is a dependency of the test runner so you will already have it in your project.

Here's an example generating an `lcov` report:
Expand Down
18 changes: 14 additions & 4 deletions bin/test-storybook.js
View file
Expand Up @@ -9,7 +9,8 @@ const fs = require('fs');
const dedent = require('ts-dedent').default;
const path = require('path');
const tempy = require('tempy');
const { getCliOptions, getStorybookMetadata } = require('../dist/cjs/util');
const { getCliOptions } = require('../dist/cjs/util/getCliOptions');
const { getStorybookMetadata } = require('../dist/cjs/util/getStorybookMetadata');
const { transformPlaywrightJson } = require('../dist/cjs/playwright/transformPlaywrightJson');

// Do this as the first thing so that any code reading it knows the right env.
Expand All @@ -26,7 +27,13 @@ process.on('unhandledRejection', (err) => {
});

const log = (message) => console.log(`[test-storybook] ${message}`);
const error = (message) => console.error(`[test-storybook] ${message}`);
const error = (err) => {
if (err instanceof Error) {
console.error(`\x1b[31m[test-storybook]\x1b[0m ${err.message} \n\n${err.stack}`);
} else {
console.error(`\x1b[31m[test-storybook]\x1b[0m ${err}`);
}
};

// Clean up tmp files globally in case of control-c
let indexTmpDir;
Expand Down Expand Up @@ -122,7 +129,7 @@ async function checkStorybook(url) {
if (res.status !== 200) throw new Error(`Unxpected status: ${res.status}`);
} catch (e) {
console.error(
dedent`[test-storybook] It seems that your Storybook instance is not running at: ${url}. Are you sure it's running?
dedent`\x1b[31m[test-storybook]\x1b[0m It seems that your Storybook instance is not running at: ${url}. Are you sure it's running?
If you're not running Storybook on the default 6006 port or want to run the tests against any custom URL, you can pass the --url flag like so:
Expand Down Expand Up @@ -268,4 +275,7 @@ const main = async () => {
await executeJestPlaywright(jestOptions);
};

main().catch((e) => log(e));
main().catch((e) => {
error(e);
process.exit(1);
});
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -106,7 +106,7 @@
"dependencies": {
"@babel/core": "^7.18.13",
"@babel/generator": "^7.18.13",
"@babel/preset-env": "^7.18.10",
"@babel/preset-env": "^7.19.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@storybook/core-common": "^6.5.0",
Expand Down
4 changes: 4 additions & 0 deletions src/util/getParsedCliOptions.ts
View file
Expand Up @@ -56,6 +56,10 @@ export const getParsedCliOptions = () => {
.option(
'--eject',
'Creates a local configuration file to override defaults of the test-runner. Use it only if you want to have better control over the runner configurations'
)
.option(
'--ci',
'Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require to be run with --updateSnapshot.'
);

program.exitOverride();
Expand Down

0 comments on commit 33a868b

Please sign in to comment.