There’s several ways to setup your components for testing within Storybook to allow us to change our component’s properties – using Knobs or creating wrapper components to encompass state changes through to hooking up to a redux store.<\/p>\n
Let’s look at an example of wrapping our component within a story. <\/p>\n
So I have an AppBar within a selection component. I want to see the story maintain the state changes when the user changes the selection. Now, no actual state is stored within the component itself as it’s passed up the component hierarchy to a parent component and\/or redux store. This means, without setting up a parent component or redux store the selection changes but the actual value on the component remains the same.<\/p>\n
One way to achieve this is to create a wrapper parent component, i.e. a minimal wrapper component around our component under test, for example<\/p>\n
\r\nclass WrapperComponent extends React.Component<any, any> {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = { ...props }\r\n }\r\n\r\n render() {\r\n const props = { \r\n ...this.props,\r\n onSelectionChanged: (selected, _) => this.setState({selected: selected}),\r\n selected: this.state.selected\r\n }\r\n\r\n return <ComponentUnderTest {...props} \/>\r\n }\r\n}\r\n<\/pre>\nSo as you can see, the ComponentUnderTest is wrapped in a WrapperComponent and hooked up to props along with state changes, now we simply have the story return the WrapperComponent, i.e.<\/p>\n
\r\nconst props = {\r\n selected: 'None'\r\n}\r\n\r\nreturn <WrapperComponent {...props}\/>\r\n<\/pre>\n