Cypress Component Testing: A Complete Tutorial

Getting Started With Cypress Component Testing

Let’s dive into Cypress component testing using a real-world example. I cloned a section on the Write for Us page from the TestMu AI website with React and SASS.

You can either use this project to follow along, or you can use any existing React project. You’ll still get the same result. All you have to do is follow the steps accordingly.

If you want to use the project, clone this Cypress Component Testing GitHub repository.

Prerequisites

To follow along with this Cypress component testing tutorial, make sure to:

• Install Node.js.
• Have npm or yarn as your package manager.

Note: Run Cypress component tests across 50+ browser versions. Try TestMu AI Today!

Set Up React Project for Component Testing

Before configuring Cypress for component testing, you need a project to work with.

Note: If you already have a React project, you can skip to the next section.

1. Create a React App

Use Vite for a rapid, modern development experience. Open your terminal and run:

npm create vite@latest <project-directory-name>

This command will launch an interactive setup where you:

• Enter a name for your project
• Select a framework (choose React)
• Pick a language (select JavaScript, unless you prefer TypeScript)

2. Move Into Your Work Directory and Install Dependencies

Run the below command to move into your work directory and install the dependencies:

cd <project-directory-name>
npm install

3. Add SASS for Styling (Optional)

Run the below command to install SASS:

npm install sass

4. Folder structure

This is how a folder structure looks like:

cypress-component-testing/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── Form.jsx
│   │   └── Navbar.jsx
│   │   └── SubmitBlog.jsx
│   │   └── SubmitBlogContent.jsx
│   ├── App.jsx
│   ├── App.scss
│   └── main.jsx
├── package.json
├── vite.config.js
└── README.md

Yours might look different, maybe due to folder name, file name, or how you created your app, but in the end, you’ll still achieve the same result if you follow up.

Our main focus in this Cypress tutorial will be on the <Form /> component. We’ll use Cypress to test the input fields, checking their placeholders and ensuring they accept user input.

5. Add your React component

Here’s what App.jsx file looks like:

import Navbar from './components/Navbar/Navbar';
import SubmitBlog from './components/SubmitBlog/SubmitBlog';

function App() {
  return (
    <>
      <Navbar />
      <SubmitBlog />
    </>
  )
}

export default App

This is not our main focus, but it’s good that you see the code in each file down to the very one we’re testing, especially if you want to practice with this same code example.

In the App.tsx component, we have <Navbar /> and <SubmitBlog />. However, we’re more concerned with the <SubmitBlog /> component, which contains a form we’ll be working with.

import Navbar from './components/Navbar/Navbar';
import SubmitBlog from './components/SubmitBlog/SubmitBlog';
 
function App() {
  return (
    <>
      <Navbar />
      <SubmitBlog />
    </>
  )
}
 
export default App

The SubmitBlog component contains SubmitBlogContent and Form. The SubmitBlogContent component is an image and title for the section. Finally, here’s the Form.jsx code we want to test:

export default function Form() {
    return (
        <form className={styles.submitBlogForm} onSubmit={(e) => {e.preventDefault();}}>
            <div className={styles.nameFields}>
                <input type="text" placeholder="First Name*" required />
                <input type="text" placeholder="Last Name*" required />
            </div>

            <input type="email" placeholder="Email*" required />
            <input type="text" placeholder="Designation*" required />

            <div className={styles.contactFields}>
                <select name="" id="" className={styles.countrySelect} required>
                    <option value="">Nigeria (+234)</option>
                    <option value="">USA (+1)</option>
                    <option value="">UK (+44)</option>
                    <option value="">Algeria (+213)</option>
                </select>
                <input type="number" placeholder="Phone Number*" required />
            </div>

            <input type="text" placeholder="Social Media Profile (LinkedIn/Twitter)*" required />

            <textarea placeholder="Provide Work Samples"></textarea>

            <button>Submit</button>
        </form>
    )
}

Here’s the styling:

.submitBlogForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;

    input {
        padding: 15px 10px;
        font-size: 16px;
        width: 100%;
        border: none;
        background-color: transparent;
        border-bottom: 1px solid #ccc;

        &:focus {
            outline: none;
        }

        &::placeholder {
            font-size: 14px;
        }
    }

    textarea {
        padding: 15px 10px;
        font-size: 14px;
        width: 100%;
        height: 100px;
        background-color: transparent;
        border: 1px solid #ccc;

        &:focus {
            outline: none;
        }

        &::placeholder {
            font-size: 14px;
        }
    }

    .nameFields {
        display: flex;
        gap: 20px;

        input {
            flex: 1;
            border-bottom: 1px solid #ccc;
        }
    }

    .contactFields {
        display: flex;
        gap: 20px;

        input {
            flex: 1;
            border-bottom: 1px solid #ccc;
        }

        .countrySelect {
            width: 30%;
            padding: 15px 10px;
            font-size: 14px;
            border: none;
            background-color: transparent;
            border-bottom: 1px solid #ccc;

            &:focus {
                outline: none;
            }
        }
    }    

    button {
        padding: 15px;
        background-color: transparent;
        border: 1px solid black;
        border-radius: 5px;
        cursor: pointer;
        width: 150px;
        color: #333;
        margin: 0 auto;
        margin-top: 20px;
    }
}

Configure Cypress for Component Testing

Now that we have a working React project, the next step is to set up Cypress for component testing. Cypress allows you to test individual components of your application, which makes it easier to identify UI bugs early in development.

1. Install Cypress

First, install Cypress as a development dependency:

npm install cypress --save-dev

2. Open Cypress

Once installed, launch Cypress using:

npx cypress open

This command opens the Cypress App (Test Runner). You’ll be prompted to choose the type of testing:

• End-to-End (E2E) Testing
• Component Testing

For this tutorial, select Component Testing.

3. Configure Framework and Bundler

After selecting component testing, Cypress will ask you to configure your setup:

• Framework: React
• Bundler: Vite

This ensures Vite is available as a dev dependency for Cypress to use internally.

4. Verify Vite Installation

Check your package.json file in the devDependencies section. If Vite is missing, install it:

npm install -D vite

5. Finalize Setup in Cypress

Click “Continue” in the Cypress app.

Select your preferred browser (I am using Electron), and then click “Start Component Testing in Electron”.

Write Component Tests

We’ll write a Cypress component test to check:

• The form renders correctly.
• All input fields exist.
• You can type into the input fields and submit the form.

First, add data-cy attributes to the form elements in the Form.jsx file:

<input type="text" placeholder="First Name*" required data-cy="first-name" />
<input type="text" placeholder="Last Name*" required data-cy="last-name" />

1. Create the Test File

Inside the cypress folder:

cypress/
└── component/
    └── Form.cy.jsx

2. Write the test

import React from 'react';
import Form from '../../src/components/Form/Form';
import '../../src/components/Form/Form.module.scss';

describe('Form component', () => {
  beforeEach(() => {
    cy.mount(<Form />);
  });

  it('renders all required fields', () => {
    cy.get('[data-cy="first-name"]').should('exist');
    cy.get('[data-cy="last-name"]').should('exist');
    cy.get('[data-cy="email"]').should('exist');
    cy.get('[data-cy="designation"]').should('exist');
    cy.get('[data-cy="country"]').should('exist');
    cy.get('[data-cy="phone"]').should('exist');
    cy.get('[data-cy="social"]').should('exist');
    cy.get('[data-cy="samples"]').should('exist');
  });


  it('Fills and submit form', () => {
    cy.get('[data-cy="first-name"]').type('Chosen');
    cy.get('[data-cy="last-name"]').type('Vincent');
    cy.get('[data-cy="email"]').type('[email protected]');
    cy.get('[data-cy="designation"]').type('Software Engineer');
    cy.get('[data-cy="country"]').select('nigeria');
    cy.get('[data-cy="phone"]').type('1234567890');
    cy.get('[data-cy="social"]').type('https://www.linkedin.com/in/chosenvincent1/');
    cy.get('[data-cy="samples"]').type('https://www.lambdatest.com/blog/smooth-scroll-in-css/');

    cy.get('[data-cy="submit"]').should('exist').click();
  });
});

Key Notes:

• Use describe to group tests and it to define test cases.
• Import React and the component explicitly.
• Use cy.mount() to render the component in the Cypress Test Runner.

Run Cypress Component Tests

Start Cypress in component testing mode:

npx cypress open --component

Or use:

npx cypress open

Then click the Form.cy.jsx file to run the test. Cypress will render the form and execute all assertions in real-time.

How to Run Cypress Component Tests on Cloud?

Running Cypress component tests locally works well, but for larger test suites, team collaboration, or CI integration, running tests on the cloud is better. We’ll use HyperExecute, an end-to-end test orchestration platform from TestMu AI.

Clone React Project

We’ll use a simple React project from the Cypress GitHub Repository, specifically the “react-webpack5-js” example.

• Clone the repository to your local machine.
• Navigate to the react-webpack5-js folder.

Running Test on HyperExecute

HyperExecute provides a pre-configured environment for faster testing. It supports Cypress, Selenium, Playwright, Appium, and multiple languages like Python, Java, C#, PHP, and Go.

1. Create a folder and YAML file

Create a folder in your project root, and inside it, create matrix.yml with the following configuration:

---
version: 0.1
runson: ${matrix.os}

cypress: true
cypressOps:
  Build: "[Matrix] Cypress Component Testing"
  Tags: ["HYP-Cypress", "macOS", "Matrix", "Accessibility"]
  BuildTags: ["HYP-Cypress-v10"]

pre:
  - npm install
  - npm install cypress --save-dev
  - npm i lambdatest-cypress-cli

matrix:
  os: [linux]
  browser: ["chrome"]
  files: ["Welcome.cy.js", "LoginForm.cy.js", "InputField.cy.js", "Button.cy.js"]

parallelism: 5

testSuites:
  - npx cypress run --component --spec ./src/components/$files --browser=$browser --headed --config video=true

jobLabel: [cypress-v10, mac, matrix]

2. Download and Add HyperExecute CLI

Download the HyperExecute CLI for your OS and place it in your project root. It reads the YAML configuration and uses your TestMu AI credentials.

3. Upload and Run Your Tests

Run this command in your terminal to upload and run your tests on HyperExecute:

./hyperexecute --config yaml/matrix.yml --force-clean-artifacts --download-artifacts --user <user_name> --key <access_key>

Replace <user_name> and <access_key> with your TestMu AI credentials.

4. View Your Tests on HyperExecute Dashboard

Navigate to HyperExecute, and click your test to view execution tasks and logs.