What is Storybook Testing?

Storybook is an open-source JavaScript-based development tool that helps build user interface part in isolation.

This usher explores what Storybook testing is and how it can be leveraged in software development.

What is Storybook?

Storybook is a JavaScript-based development creature, that allows developers to make the user interface component in isolation and helps them develop the UI constituent faster, and easy.

Storybook also helps in the process of corroboration when developing UI components for better record keeping.

History of Storybook

Storybookwas launched in April 2016 by an organization make Kadira. Initially, it was not an open source tool, but rather a paid tool. Storybook 2.0 was well documented and made extensible to supply to wider essay needs.

9 months after launch, Kadira close down the Storybook Project, and no development was observed after the closedown. However, in April 2017, the Storybook project was open-sourced to the community, and it started gaining a lot of traction. Storybook has arrive up with the major freeing of Storybook 3.0 in May 2017.

Today the Storybook is the virtually democratic puppet for UI components ontogeny, and it endorse many development frameworks such as React, Vue, and Angular. Today, it also indorse a lot ofAdd onswhich can be well integrated with the framework.

What is Storybook Testing?

Storybook helps to acquire the UI components in an isolation; similarly, it can also be used to test the UI constituent. It render a clear environment for prove UI components in isolation.

Storybook helps to test Optic Validation, Interaction, Accessibility, etc. is widely use and very democratic.

Key Features of Storybook Testing

Here are the main features of Storybook that enhance testing:

• Component Isolation: Test components in isolation without depending on the application & # 8217; s context to assure the components work as anticipate.
• Synergistic Component Libraries: Provides an interactive UI to visualize, and interact with different variate and states of the components.
• Support for: Integrate tool like Percy to bewitch and compare component snapshots to spot UI changes.
• Storybook Addons: Storybook offers different Addons to raise its functionality, including A11y for, Knobs for active component state changes etc.
• Component reusability: It lets you reuse component by let you display, test and modify components without needing a full app rebuild.
• Seamless Integrations: Storybook can integrate with like GitHub, Bitbucket, and, along with frontend fabric like.
• Document Components: Storybook can automatically generate visual documentation of your components as you develop them, helping teams collaborate more effectively.
• Testing Support: Storybook desegregate with essay libraries like and Library to help write and run unit and integration tests for components easily.

How to Use Storybook for UI Testing

With Storybook, you can create isolated UI ingredient and test their visual consistency. Here & # 8217; s how you can use Storybook for UI Testing:

1. Install Storybook

Set Up Storybook in your project:

npx storybook init

Then, customize the constellation in.storybookfolder as take.

2. Create Stories

Create stories to show different UI ingredient states

3. Test Independent Components

Interact with components in isolation by using Storybook & # 8217; s interface

4. Integrate Visual Testing

Integrate Storybook with instrument like Percy to run automate visual regression tests. You can refer this to integrate Percy and Storybook seamlessly.

Talk to an Expert

5. Accessibility Tests

Leverage the Storybook accessibility addon to validate compliance with WCAG measure.

6. Integrate with CI/CD

Integrate Storybook with your CI/CD pipeline to alleviate automatic testing of your tale during deployment.

What is Visual Testing?

The optic exam are also called or visual substantiation testing. help to validate the UI changes such as font, layout, color, size, etc. Ocular examination can be done after the integration of code by running the tryout against your coating URL. The Storybook helps to essay the components visually.

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

How does Visual Testing Work?

Visual examine works by equate two screenshots. The baseline or the humble ikon is compared against the actual picture. The baseline persona is captured once and stored, and whenever you run the visual substantiation test, the base screenshot is liken against the actual screenshot. The actual screenshot is generated in every run.

If there is any difference found while comparing, so the test is marked as a fail; if there is no difference so it is marked as a walk, as depicted in the image below.

How to Perform Storybook Testing with Percy?

BrowserStack ’ s render visual testing as a service. It get visual testing easier and quicker by render online access to your test results and showing the visual dispute side by side.

Percy can be integrate with many popular mechanization tools such as,,,,, etc.

Percy also back integration with Storybook. When it comes to UI growth, the combination help with component-level visual testing.

Let & # 8217; s understand the Visual Testing in Storybook using Percy with an example

The Storybook and React are the most used combination; as a pre-requisite, you need tointegrate Storybook with React App.

Once your framework is integrated with Storybook, the next step is to set up Percy for Visual Testing in Storybook.

Let & # 8217; s use the sampling application created on theGithubcode base.

Step 1: Install Percy node packages

Navigate to your Project root folder where thepackage.jsonfile is located, and enter the below bid on your end

npm install -- save-dev @ percy/cli @ percy/storybook

The above command installs two bundle,@ percy/cli, and @ percy/storybook. these packages are required to integrate your application with Percy.

Step 2: Get the PERCY_TOKEN

The PERCY_TOKENuniquely identifies your project on Percy & # 8217; s substructure. Before fulfill your tests you need to get thePERCY_TOKEN.

Steps to get thePERCY_TOKEN

• Login to Percy

• Create a new Project (If you have Percy Project already created, you can prefer to use the same.)
• Navigate to Project Settings in Percy
• Copy the PERCY_TOKEN

Step 3: Set up the PERCY_TOKEN environment variable

As mentioned above, thePERCY_TOKENuniquely identifies your project on Percy & # 8217; s base, when you execute your tests, the Percy CLI look for thePERCY_TOKENenvironment variable so you need to set thePERCY_TOKENenvironment variable.

Setting up token bid differs from the dictation line puppet, based on the command line tool you are using you can choose the below one and accomplish the like.

Use the commands below to Set up aPERCY_TOKENenvironment variable in:

• Powershell

$ Env: PERCY_TOKEN= '' & lt; your-project-token & gt; ''

• Windows Command line

set PERCY_TOKEN= '' & lt; your-project-token & gt; ''

• Linux/Mac-based Terminal

exportation PERCY_TOKEN= & lt; your-project-token & gt;

Step 4: Execute Percy Storybook Tests

Percy captures the screenshot of all your constituent once you execute the tryout. There are multiple ways to fulfill your Storybook and Percy Visual Tests, one of which is by entering the below bidding

npx percy storybook: start

This command starts the Storybook and loads the Storybook components and captures them. The captured screenshot will be upload to Percy & # 8217; s infrastructure.

Alternatively, you can configure the tryout bidding shortcut inpackage.jsonand use the below command

npm run test

Once the execution is accomplished the command line yield will demo Percy & # 8217; s build URL. You can navigate to the form and corroborate the test consequence.

Alternatively, Manually log in to Percy and go to Projects, then click on the latest build to validate the results.

Percy & # 8217; s build fascia shows both the current icon and baseline persona side-by-side along with the differences foreground if there are any as realize below:

If there are no differences, Percy indicates that with the content & # 8220; No Changes & # 8221; as seen in the image below:

How to examine various states of the component using Percy and Storybook

Let & # 8217; s take an example of aTo-Do app, the project can experience various state like active, completed, etc. The completed project are marked with strike-through baptistry. Percy provides the feature to test the component states.

Below is thestoryfile, for to-do task component

import React, {useState, useRef} from 'react '; import TodoApp from './TodoApp '; exportation default {rubric: 'TodoApp ', component: TodoApp,}; export const App = args = & gt; & lt; TodoApp {... args} / & gt;; // match component gens for individual story hoisting App.storyName = 'TodoApp '; App.args = {showTodos: 'all ', todos: [{rubric: 'Foo ', dispatch: true}, {rubric: 'Bar ', completed: true}, {title: 'Baz '}, {rubric: 'Qux '}, {rubric: 'Xyzzy '}]};

This storyfile can be modify to mix with Percy to take a screenshot of province. Percy supply an alternativeadditionalSnapshots, which help to take a screenshot of diverse province of the component such as active, completed, etc.

The above storyfile can be modified to take to screenshot of states, like below.

significance React, {useState, useRef} from 'react '; import TodoApp from './TodoApp '; export default {rubric: 'TodoApp ', factor: TodoApp,}; export const App = args = & gt; & lt; TodoApp {... args} / & gt;; // match portion gens for individual story hoist App.storyName = 'TodoApp '; App.args = {showTodos: 'all ', todos: [{title: 'Foo ', completed: true}, {title: 'Bar ', completed: true}, {title: 'Baz '}, {rubric: 'Qux '}, {title: 'Xyzzy '}]}; App.parameters = {// take extra snapshots of various states percy: {additionalSnapshots: [{suffix: ' - Active ', args: {showTodos: 'active '}}, {suffix: ' - Completed ', args: {showTodos: 'completed '}}, {suffix: ' - None ', args: {todos: []}}]}};

In the above codification, added the sectionApp.parameters, which has some of Percy & # 8217; s parameter likeadditionalSnapshots.

The postfix is used to name the image files in Percy & # 8217; s infrastructure, which helps to differentiate the image files.

Best Practices for Storybook Testing

Here are some of the best exercise one must postdate during Storybook Testing:

• Consider visual testing:Many times is considered an afterthought, which increases the UI bug at a later degree. Considering visual examination at the earlier stage while setting up a framework helps to deliver quality code.
• Schedule tests more often:The Storybook tests need to be schedule and verified at intervals like every day, once in two days, etc., which aid eliminate any accidental changes or matter arising from codification conflux.
• Consider equal test result followup:Like you do peer code review, consider critique test answer by your peers, having a SaaS tool like Percy anyone can review from anywhere, this assist to get the bugs or suggest betterment.
• Test all possible province of component:One component may hold multiple state, it is important to test the province of the component, depending on the state of the element the style may vary, adding the state testing to your mandatory list help to improve the codification caliber.

Benefits of Storybook Testing

Here are the key benefits for use Storybook for testing:

• Component Isolation: Develop and test components in isolation without bet on the entire application
• Visual Documentation: Generate interactive and visual documentation for components automatically
• Quicker UI ontogeny: Accelerate UI development with the supporter of real-time trailer and component state management
• Customizable UI: Customize UI to fulfill specific project requisite
• Addon Ecosystem: Leverage addons for approachability testing, performance optimization, and more.
• Seamless Integration: Integrate seamlessly with to facilitate handiness and consistency.

Conclusion

Storybook examine allows to progress and test UI components for a seamless exploiter experience. However, you can integrate Storybook with Percy to perform visual testing of the UI components.

Percy is a dedicated puppet for Visual Testing; unlike other tools,Percymainly focuses on improving its visual testing features. One of the major lineament of Percy is once you run the Visual quiz the captured screenshot will render found on multiple browsers such as Firefox, Chrome, and Safari this eliminates scat your UI tests against multiple browsers.

Knowing that any bug institute during the ulterior stage of development gets dear, integrating Percy with Storybook helps you to eliminate the bugs at the rattling early stage of development thus the quality code can be render.

Useful Resources for Storybook

Related Guides