Presented at FrontConf 2017 in Munich by Violet Peña
Managing large React projects can be a Herculean task. Storybook is an open-source, component-driven development environment that can ease the burden on you and your team. With Storybook, you can organize and document your components, validate your code using unit and snapshot tests, and easily share work with designers and project managers. Attendees will learn about Storybook and its uses in React projects, focusing on using it to develop, test, and review components. They will leave empowered to use Storybook on their next project and improve the workflow of their entire team.
85. Button/index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
All buttons have the same text now
</button>
);
}
}
86. Button/index.js
export class Button extends React.Component {
render() {
return (
<button
type="button"
className={ this.props.type }
onClick={ this.props.function }
>
All buttons have the same text now
</button>
);
}
}
88. console
● Storyshots › Button › default
expect(value).toMatchSnapshot()
Received value does not match stored snapshot 1.
- Snapshot
+ Received
<button
className="button"
onClick={[Function]}
type="button"
>
- Button
+ All buttons have the same text now
</button>
at Object.test (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:27:18)
at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:146:28)
at new Promise (<anonymous>)
at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)