(updated ) by

Storybook: Component Story Format

This new format for your stories makes it a lot less horrible. No more hassling with storiesOf API. Now you can format your stories as ES Modules.

Component Story Format (CSF)

import MyComponent from './MyComponent.js'

export default {
	title: 'MyComponent'
}

export const normal = () => <MyComponent />

Testing

Because they are ES Modules, implementing the components, we can use them also for testing.

import { render } from '@testing-library/react'
import { normal } from './MyComponent.stories.js'

test('MyComponent renders', () => {
	expect(render(normal())).toMatchSnapshot()
})