Quick Tip — Storybook Play Function

The Play Function

npm install — save-dev @storybook/addon-interactions @storybook/testing-library
module.exports = {
stories:[],
addons:[
'@storybook/addon-interactions'
]
};

Play Function in Action

import { screen } from '@storybook/testing-library';... // some story definitionsexport const Default = Template.bind({});
Default.play = async () => {
screen.getByTestId("someElementTestId").show('hello storybook');
}
  • Play can have asynchronous interactions and therefore I use the async keyword. In this example there are no awaits but there could be (for example awaiting to simulated user interactions).
  • I use the screen object from the @storybook/testing-library to grab an element by it’s test id. You should make sure the element indeed has a test id like the one that was used otherwise you will get an error.
  • Once I have the element after it was queried from the DOM, I can interact with it. In this example I call an exposed API function called show.

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gil Fink

Gil Fink

770 Followers

Hardcore web developer, @sparXys CEO, Google Web Technologies GDE, Microsoft MVP, Pro SPA Development co-author, husband, dad and a geek.