Skip to main content
Version: 4.3

Mocking data for Storybook

Storybook is a great utility to do isolated development and testing, potentially speeding up development time greatly.

\

enables easy loading of fixtures to test the happy path of components. Loading state is bypassed by initializing the cache ahead of time.

Setup

export default class ArticleResource extends Resource {
readonly id: number | undefined = undefined;
readonly content: string = '';
readonly author: number | null = null;
readonly contributors: number[] = [];

pk() {
return this.id?.toString();
}
static urlRoot = 'http://test.com/article/';
}
import ArticleResource from 'resources/ArticleResource';
import ArticleSummary from './ArticleSummary';

export default function ArticleList({ prop }: { prop: number }) {
const articles = useResource(ArticleResource.listShape(), { prop });
return (
<div>
{articles.map(article => (
<ArticleSummary key={article.pk()} article={article} />
))}
</div>
);
}

Fixtures

We'll test three cases: some interesting results in the list, an empty list, and data not existing so loading fallback is shown.

fixtures.ts

export default {
full: [
{
request: ArticleResource.listShape(),
params: { maxResults: 10 },
result: [
{
id: 5,
content: 'have a merry christmas',
author: 2,
contributors: [],
},
{
id: 532,
content: 'never again',
author: 23,
contributors: [5],
},
],
},
],
empty: [
{
request: ArticleResource.listShape(),
params: { maxResults: 10 },
result: [],
},
],
loading: [],
};

Story

We use a storybook knob to make it easy for the user to select between each dataset to compare how it looks.

ArticleListStory.tsx

import { select } from '@storybook/addon-knobs';
import { MockProvider } from '@rest-hooks/test';
import ArticleList from 'ArticleList';
import options from './fixtures';

const label = 'Data';
const defaultValue = 'full';
const groupId = 'GROUP-ID1';

storiesOf('name', module).add('Name', () => {
const results = select(label, options, defaultValue, groupId);
return (
<MockProvider results={results}>
<ArticleList maxResults={10} />
</MockProvider>
);
});