Quick Tip — Storybook Play Function
Tags: tips, storybook, webdev
Published: 2022-09-11 09:21:32

---
title: Quick Tip — Storybook Play Function
published: true
date: 2022-09-11 09:14:16 UTC
tags: tips,storybook,webdevelopment
canonical_url: https://gilfink.medium.com/quick-tip-storybook-play-function-8eb95cab4d8f
---

### Quick Tip — Storybook Play Function

![](https://cdn-images-1.medium.com/max/1024/1*Aa0UyDHGmJcBNcax3kOcBw.png)

[Storybook](https://storybook.js.org/) is a go to tool that a lot of developers are using as a lab environment to the components they are creating. Storybook renders the components and then enable to interact with them, change their props and see the outcome of the changes.

But sometime you might want to simulate user interactions or use some exposed component API after the component was rendered. How can you do that?

In this short post you will get familiar with Storybook **play** function, which enables you to hook operations after the component was rendered.

#### The Play Function

Storybook stories can help developers to test their components in a lab environment. When you want to simulate interaction with your component or use a function which was exposed from you component, you will want to hook the **play** function to your template instance.

The **play** function is a hook that enables you to interact with the component after it was rendered. Before you can use it, you need to make sure that Storybook’s **addon-interactions** is installed. Another package that you might want to install is **@storybook/testing-library** , which can help you to work with Storybook exposed DOM. If the packages aren’t installed, run the following command in your command line in the root folder of your project:

```
npm install — save-dev @storybook/addon-interactions @storybook/testing-library
```

Once the packages are installed, you should make sure that the **addon-interactions** addon is added to the list of addons in the  **.storybook/main.js** file:

```
module.exports = {
  stories:[],
  addons:[
    '@storybook/addon-interactions'
  ]
};
```

Now that everything is in place let’s see how you can use the **play** function inside a stories file.

#### Play Function in Action

The **play** function is added to the instance of a Storybook template like adding stories  **args** :

```
import { screen } from '@storybook/testing-library';

... // some story definitions

export const Default = Template.bind({});
Default.play = async () => {
  screen.getByTestId("someElementTestId").show('hello storybook');
}
```

A few things to notice in this small example:

- 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**.

This example is very easy and you can definitely do some sophisticated things such as running user events (click, typing and etc.) using the testing library API, compose more than one story and more.

#### Summary

In the post you learned about the **play** function in Storybook. The **play** function is a very handy hook that enables you to “play” user interactions or component exposed API functions after the component was rendered in Storybook preview section.

If you have any questions, feel free to write them in the comments section.