Last active
November 5, 2020 10:34
Mock Fetch requests in Storybook
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import { storiesOf } from '@storybook/react' | |
import FetchStory from './FetchStory' | |
storiesOf('Fetch Example', module) | |
.add('Plain', () => ( | |
<FetchStory mocks={{ | |
matcher: '/api/signup', | |
response: { | |
body: { | |
value: 'success', | |
}, | |
}, | |
options: { | |
method: 'POST', | |
}, | |
}]}> | |
<div>Add your components here</div> | |
</FetchStory> | |
)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* eslint-disable import/no-extraneous-dependencies */ | |
import React from 'react' | |
import PropTypes from 'prop-types' | |
import fetchMock from 'fetch-mock' | |
class FetchStory extends React.Component { | |
static displayName = 'FetchStory' | |
static propTypes = { | |
silent: PropTypes.bool, | |
/** Time in ms to delay the request */ | |
throttle: PropTypes.number, | |
mocks: PropTypes.arrayOf( | |
PropTypes.shape({ | |
/** The url to match against */ | |
matcher: PropTypes.string.isRequired, | |
response: PropTypes.any, | |
options: PropTypes.shape({ | |
method: PropTypes.string, | |
headers: PropTypes.object, | |
}), | |
}), | |
).isRequired, | |
} | |
static defaultProps = { | |
throttle: 300, | |
} | |
componentWillMount() { | |
this.mock() | |
} | |
componentWillUnmount() { | |
if (fetchMock.__prevProxy === this) { | |
this.unmock() | |
} | |
} | |
mock() { | |
// Clear mocks from a previous FetchStory | |
this.unmock() | |
const mocks = this.props.mocks | |
if (mocks) { | |
mocks.forEach(mock => { | |
fetchMock.mock({ | |
...mock, | |
response: (url, opts) => { | |
if (!this.props.silent) { | |
console.info('fetch', url, opts) | |
} | |
let result = { | |
body: mock.response, | |
headers: new Headers({ | |
'content-type': 'application/json', | |
}), | |
} | |
if ( | |
mock.response.hasOwnProperty('body') || | |
mock.response.hasOwnProperty('status') || | |
mock.response.hasOwnProperty('headers') | |
) { | |
result = { | |
...result, | |
...mock.response, | |
} | |
} | |
return this.props.throttle | |
? new Promise(resolve => { | |
setTimeout(() => resolve(result), this.props.throttle) | |
}) | |
: result | |
}, | |
}) | |
}) | |
// Allow unmocked requests to fall through | |
fetchMock.catch((...args) => fetchMock.realFetch.apply(window, args)) | |
fetchMock.__prevProxy = this | |
} | |
} | |
unmock() { | |
if (typeof fetchMock.restore === 'function') { | |
fetchMock.restore() | |
delete fetchMock.__prevProxy | |
} | |
} | |
render() { | |
return this.props.children | |
} | |
} | |
export default FetchStory |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment