When developing applications with React, creating reusable UI components can significantly improve your productivity and code maintainability. Here’s where Storybook comes into play. Storybook is a powerful tool that allows you to build UI components in isolation, which makes it easier to develop and test them. Once we’ve built our components in Storybook, we can then use Cypress to perform end-to-end testing, ensuring everything works as expected.

In this guide, we will take a step-by-step approach to setting everything up for a seamless development and testing experience.

Step 1: Setting Up Your React Project

First, let’s create a new React project. If you already have a React app, you can skip this step.

npx create-react-app my-app
cd my-app

Step 2: Installing Storybook

To install Storybook, we can use the Storybook CLI tool. Run the following command in your project directory:

npx sb init

This command will install Storybook and create the necessary configuration files and directories for you.

Step 3: Running Storybook

Now that we have Storybook installed, we can run it. In your terminal, execute:

npm run storybook

This command starts the Storybook development server, and you can open it in your browser typically at http://localhost:6006.

Step 4: Creating Your First Component

Let’s create a simple Button component. Create a new file called Button.js in the src directory with the following code:

// src/Button.js
import React from 'react';
import './Button.css';

const Button = ({ label, onClick }) => {
    return (
        <button className="button" onClick={onClick}>
            {label}
        </button>
    );
};

export default Button;

Then, create a CSS file Button.css for styling:

/* src/Button.css */
.button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

Step 5: Adding Stories for Your Component

Next, let’s add some stories for the Button component. Create a file named Button.stories.js in the same directory as Button.js:

// src/Button.stories.js
import React from 'react';
import Button from './Button';

export default {
    title: 'Example/Button',
    component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
    label: 'Click Me',
};

This code creates a Storybook story for the Button component, allowing you to see how it looks and behaves with various props.

Step 6: Testing with Cypress

Now that we have our Button component in Storybook, let’s set up Cypress for testing. First, install Cypress in your project:

npm install cypress --save-dev

Next, open Cypress for the first time to create the necessary configuration files and folders:

npx cypress open

Now, we can write our first test. Create a file named button.spec.js in the cypress/integration directory:

// cypress/integration/button.spec.js
describe('Button component', () => {
    it('should display the correct label', () => {
        cy.visit('http://localhost:6006'); // URL where Storybook runs
        cy.contains('Click Me').should('be.visible');
    });

    it('should click the button', () => {
        cy.contains('Click Me').click();
        // Add additional assertions for what happens when the button is clicked
    });
});

Step 7: Running Cypress Tests

Finally, run the Cypress tests to see if everything is working fine. Make sure your Storybook is still running and execute:

npx cypress open

You can then click on your test in the Cypress interface to run it, and you should see it laid out in the Cypress UI.

By integrating React Storybook with Cypress, you have a powerful combination that enhances your development workflow. You can build, visualize, and test your components efficiently, leading to higher-quality applications and less frustration during the development lifecycle.

Now you have a basic understanding of how to use Storybook with Cypress. Start creating your components and testing them for a smoother development experience!