GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 13:01:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Re formatted with correct prettier rules

Browse Source
This commit is contained in:
Tom Coleman 2018-07-05 11:29:07 +10:00
parent db5100e80d
commit 6b52885398
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
addons/jest/README.md
View File

@ -72,7 +72,7 @@ You could create a `prebuild:storybook` npm script, which will never fail by app
Register addon at `.storybook/addons.js`
```js
import "@storybook/addon-jest/register";
import '@storybook/addon-jest/register';
```
## Usage
@ -82,16 +82,16 @@ Assuming that you have created a test files `MyComponent.test.js` and `MyOtherCo
In your `story.js`
```js
import results from "../.jest-test-results.json";
import { withTests } from "@storybook/addon-jest";
import results from '../.jest-test-results.json';
import { withTests } from '@storybook/addon-jest';
storiesOf("MyComponent", module)
storiesOf('MyComponent', module)
.addDecorator(withTests({ results }))
.add(
"This story shows test results from MyComponent.test.js and MyOtherComponent.test.js",
'This story shows test results from MyComponent.test.js and MyOtherComponent.test.js',
() => <div>Jest results in storybook</div>,
{
jest: ["MyComponent.test.js", "MyOtherComponent.test.js"]
jest: ['MyComponent.test.js', 'MyOtherComponent.test.js'],
}
);
```
@ -99,14 +99,14 @@ storiesOf("MyComponent", module)
Or in order to avoid importing `.jest-test-results.json` in each story, simply add the decorator in your `.storybook/config.js` and results will display for stories that you have set the `jest` parameter on:
```js
import { addDecorator } from "@storybook/react"; // <- or your view layer
import { withTests } from "@storybook/addon-jest";
import { addDecorator } from '@storybook/react'; // <- or your view layer
import { withTests } from '@storybook/addon-jest';
import results from "../.jest-test-results.json";
import results from '../.jest-test-results.json';
addDecorator(
withTests({
results
results,
})
);
```
@ -114,11 +114,11 @@ addDecorator(
Then in your story:
```js
storiesOf("MyComponent", module)
storiesOf('MyComponent', module)
// Use .addParameters if you want the same tests displayed for all stories of the component
.addParameters({ jest: ["MyComponent", "MyOtherComponent"] })
.addParameters({ jest: ['MyComponent', 'MyOtherComponent'] })
.add(
"This story shows test results from MyComponent.test.js and MyOtherComponent.test.js",
'This story shows test results from MyComponent.test.js and MyOtherComponent.test.js',
() => <div>Jest results in storybook</div>
);
```
@ -128,13 +128,9 @@ storiesOf("MyComponent", module)
You can disable the addon for a single story by setting the `jest` parameter to `{disable: true}`:
```js
storiesOf("MyComponent", module).add(
"Story",
() => <div>Jest results disabled herek</div>,
{
jest: { disable: true }
}
);
storiesOf('MyComponent', module).add('Story', () => <div>Jest results disabled here</div>, {
jest: { disable: true },
});
```
### withTests(options)
@ -151,7 +147,7 @@ Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-pre
In project`s`typings.d.ts` add
```ts
declare module "*.json" {
declare module '*.json' {
const value: any;
export default value;
}
@ -160,15 +156,15 @@ declare module "*.json" {
In your `.storybook/config.ts`:
```ts
import { addDecorator } from "@storybook/angular";
import { withTests } from "@storybook/addon-jest";
import { addDecorator } from '@storybook/angular';
import { withTests } from '@storybook/addon-jest';
import * as results from "../.jest-test-results.json";
import * as results from '../.jest-test-results.json';
addDecorator(
withTests({
results,
filesExt: "((\\.specs?)|(\\.tests?))?(\\.ts)?$"
filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$',
})
);
```
@ -176,10 +172,10 @@ addDecorator(
Then in your story:
```js
storiesOf("MyComponent", module)
.addParameters({ jest: ["my.component", "my-other.component"] })
storiesOf('MyComponent', module)
.addParameters({ jest: ['my.component', 'my-other.component'] })
.add(
"This story shows test results from my.component.spec.ts and my-other.component.spec.ts",
'This story shows test results from my.component.spec.ts and my-other.component.spec.ts',
() => <div>Jest results in storybook</div>
);
```