How to Set Up Storybook to View and Test Code
Setup Storybook to view and test our code.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Creating React Libraries from Scratch course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:09] Storybook is a tool for viewing and interacting with user interface components. There are plug-ins for a wide array of frameworks including React, Angular, View, and many more.
[00:10 - 00:18] Storybook gives us a sandbox to test our React code. It also gives us a nice website we can publish to our users to allow them to demo our library.
[00:19 - 00:31] Get started by setting up Storybook by using their initialization installer. MPX is a tool which comes with MPM for running scripts found in node modules/ bin.
[00:32 - 00:47] If the script is in found locally, MPX will download the required scripts from the MPM package manager. SB will scan our project for the correct front-end framework to use in our case , React, and add Storybook to Scroller's dev dependencies.
[00:48 - 01:16] A Story's directory is automatically created and source/stories delete all the files contained within. These are auto-generated files that we'll be replacing soon.
[01:17 - 01:36] The initialization script also updated our package to that JSON to include a Storybook command, which will launch the Storybook sandbox. Create a new file inside source/stories called usescroller.stories.js.
[01:37 - 01:47] Files suffix with .stories tell Storybook which files to look for when generating its files. A Story is a place to visually share and test front-end code.
[01:48 - 01:58] We can have a group of Stories for a single component show different implementations of a component, or one Story per component. First, we'll import the dependencies needed to write a Story for usescroller.
[01:59 - 02:12] We'll be needing React and usescroller itself. Next, we'll export a view or Story for interacting with the usescroller hook.
[02:13 - 02:25] Storybook uses a CSF or component story format to define its stories. At a high level, this means that any component exported as a name export are the stories itself.
[02:26 - 02:37] Metadata about these stories get exported as a default export. We'll give our Story a title by saying Export Default and give it an object.
[02:38 - 02:49] Here, we'll define a title which we'll call usescroller. This is a title that groups all our Stories together in this file.
[02:50 - 03:05] Next, we'll export a testing component or Story called usescroller example. We'll set up the hook usescroller and we'll give some arbitrary values.
[03:06 - 03:16] So our Y will be 200 and we'll say is smooth to be true. Finally, we'll return a view for our Story.
[03:17 - 03:25] In here, we'll create a div that is super-talled so we can display the scrolling. We'll use 3000 pixels.
[03:26 - 03:39] And then a button which on clicked calls our scroller callback. Within the scroller directory, run Yarn Storybook.
[03:40 - 03:53] This will run the Storybook sandbox so we can view the story we just created. Now, when we click our button, we can see our hook working in scrolling.
[03:54 - 04:01] >> Okay.