Writing Your First End-to-End Test with Cypress in a Vite React TypeScript App

Introduction

End-to-end (E2E) testing is an essential part of modern web development. It ensures that your application works as expected from the user's perspective. In this blog post, we'll walk through setting up Cypress for E2E testing in a Vite React TypeScript application. We'll create a simple app that fetches and displays jokes, then write tests to verify its behavior.

Prerequisites

Before we start, make sure you have the following installed:

• Node.js and npm
• Vite
• React
• TypeScript

Setting Up the Project

1. Create a Vite React TypeScript App

First, create a new Vite React TypeScript project:

npm create vite@latest my-demo-app --template react-ts
cd my-demo-app
npm install

2. Install Cypress

Next, install Cypress as a development dependency:

npm install cypress --save-dev

3. Initialize Cypress

Open Cypress for the first time to initialize the required files and directories:

npx cypress open

This command will create a cypress directory and some example test files.

Creating the Joke App

1. Create a Joke Component

Create a Joke.tsx component that fetches and displays a joke:

import React, { useState } from 'react';

const Joke: React.FC = () => {
  const [joke, setJoke] = useState<string>('');

  const fetchJoke = async () => {
    const response = await fetch('https://icanhazdadjoke.com/', {
      headers: { Accept: 'application/json' },
    });
    const data = await response.json();
    setJoke(data.joke);
  };

  return (
    <div>
      <button onClick={fetchJoke}>Get Joke</button>
      <p>{joke}</p>
    </div>
  );
};

export default Joke;

2. Update the App Component

Use the Joke component in your App.tsx:

import React from 'react';
import Joke from './components/Joke';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Joke App</h1>
      <Joke />
    </div>
  );
};

export default App;

Writing Cypress Tests

1. Create a Cypress Test File

Create a new test file joke.cy.ts in the cypress/e2e directory:

/// <reference types="cypress" />

describe('Joke App', () => {
  it('should display a joke when the button is clicked', () => {
    cy.visit('http://localhost:5173');
    cy.get('button').click();
    cy.get('p').should('not.be.empty');
  });

  it('should fetch a new joke when the button is clicked again', () => {
    cy.visit('http://localhost:5173');
    cy.get('button').click();
    cy.wait(1000); // Wait for the first joke to load
    cy.get('p').then(($p) => {
      const firstJoke = $p.text();
      cy.get('button').click();
      cy.wait(1000); // Wait for the new joke to load
      cy.get('p').should(($newP) => {
        const newJoke = $newP.text();
        expect(newJoke).not.to.eq(firstJoke);
      });
    });
  });
});

2. Run the Cypress Tests

Open Cypress and run the tests:

npx cypress open

This will open the Cypress Test Runner, where you can see your tests listed and run them.

Conclusion

Congratulations! You've successfully set up Cypress for E2E testing in a Vite React TypeScript app. You've created a simple joke-fetching app and written tests to verify its functionality. E2E testing with Cypress helps ensure that your application behaves as expected from the user's perspective, providing confidence as you develop and deploy your app.

For more advanced Cypress features and testing scenarios, refer to the Cypress documentation. Written with ❤️ By Jazzed Technology Happy testing!