mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-20 05:02:37 +08:00
Add example of wiring up an import decorator
This commit is contained in:
parent
cc28ed73c4
commit
4c84c3bcfa
@ -108,7 +108,7 @@ LoggedOut.parameters: {
|
|||||||
|
|
||||||
#### Mocking imports
|
#### Mocking imports
|
||||||
|
|
||||||
It is also possible to mock imports directly, similar to Jest, using webpack’s aliasing. This is useful if your component makes network requests directly.
|
It is also possible to mock imports directly, similar to Jest, using webpack’s aliasing. This is useful if your component makes network requests directly via a library, such as [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch).
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@ -117,13 +117,75 @@ module.exports = {
|
|||||||
// your Storybook configuration
|
// your Storybook configuration
|
||||||
|
|
||||||
webpackFinal: config => {
|
webpackFinal: config => {
|
||||||
config.resolve.alias.fetch = '../__mocks__/fetch.js'
|
config.resolve.alias['isomorphic-fetch'] = require.resolve('../__mocks__/isomorphic-fetch.js');
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
You would still need to write the fetch mock and wire up a decorator to provide results to it based on the current story.
|
You would still need to write the fetch mock and wire up a decorator to provide results to it based on the current story. An example of how that might look:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// __mocks__/isomorphic-fetch.js
|
||||||
|
let nextJson;
|
||||||
|
export default async function fetch() {
|
||||||
|
if (nextJson) {
|
||||||
|
return {
|
||||||
|
json: () => nextJson,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
nextJson = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function decorator(story, { parameters }) {
|
||||||
|
if (parameters && parameters.fetch) {
|
||||||
|
nextJson = parameters.fetch.json;
|
||||||
|
}
|
||||||
|
return story();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You would then wire it up like so:
|
||||||
|
```js
|
||||||
|
// .storybook/preview.js
|
||||||
|
import { decorator } from '../__mocks/isomorphic-fetch';
|
||||||
|
|
||||||
|
// Add the decorator to all stories
|
||||||
|
export const decorators = [decorator];
|
||||||
|
```
|
||||||
|
|
||||||
|
Then to set the value for a specific story you could do (to borrow an example from this [blog post](https://medium.com/@edogc/visual-unit-testing-with-react-storybook-and-fetch-mock-4594d3a281e6)):
|
||||||
|
|
||||||
|
```js
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'App',
|
||||||
|
component: App,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Template = (args) => <App {...args />;
|
||||||
|
|
||||||
|
export const Success = Template.bind({});
|
||||||
|
Success.parameters = {
|
||||||
|
fetch: {
|
||||||
|
json: {
|
||||||
|
JavaScript: 3390991,
|
||||||
|
'C++': 44974,
|
||||||
|
TypeScript: 15530,
|
||||||
|
CoffeeScript: 12253,
|
||||||
|
Python: 9383,
|
||||||
|
C: 5341,
|
||||||
|
Shell: 5115,
|
||||||
|
HTML: 3420,
|
||||||
|
CSS: 3171,
|
||||||
|
Makefile: 189,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
#### Specific mocks
|
#### Specific mocks
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user