Go back

✅ How to Use Cypress in a React + TypeScript Project

Cypress is a powerful end-to-end (E2E) testing framework that helps ensure your application behaves as expected from a user’s perspective. Integrating Cypress into a React + TypeScript project can greatly improve confidence in your codebase, reduce bugs, and automate UI testing efficiently.

---

🚀 Benefits of Using Cypress for React Applications

• Test user interactions in a real browser environment.
• Easy to debug with time-travel snapshots and browser dev tools.
• Built-in support for modern frameworks like React.
• Seamless CI/CD integration (e.g., GitHub Actions, GitLab CI).
• Excellent TypeScript support.

---

1. Install Cypress

Run the following command in your project root:

bash
1npm install cypress --save-dev

Then, to open the Cypress Test Runner UI:

bash
1npx cypress open

---

2. Cypress Configuration (cypress.config.ts)

Create or modify the cypress.config.ts file in your project root:

ts
1// eslint-disable-next-line import/no-extraneous-dependencies
2import { defineConfig } from "cypress";
3
4export default defineConfig({
5  projectId: "5dmi8n", // Optional: used if you connect to Cypress Cloud
6  e2e: {
7    baseUrl: "http://localhost:5173/", // Adjust to match your local dev server
8  },
9});

📝 Why this matters:

• baseUrl lets you avoid repeating the full URL (cy.visit("/") instead of cy.visit("http://localhost:5173/")).
• projectId is optional and only needed if using the Cypress Dashboard.

---

3. TypeScript & ESLint Configuration

Cypress supports TypeScript out of the box, but you’ll need to configure ESLint and TypeScript properly so the Cypress files are linted correctly and don’t break your build.

✅ ESLint: .eslintrc.cjs

js
1module.exports = {
2  overrides: [
3    {
4      // Testing Library for React unit/integration tests
5      files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
6      extends: ["plugin:testing-library/react"],
7    },
8    {
9      // Cypress E2E files
10      files: ["cypress/**/*.ts", "cypress.config.ts"],
11      parserOptions: {
12        project: "./cypress/tsconfig.json",
13      },
14    },
15  ],
16};

🔍 Explanation:

• The first override is for unit/integration tests using Testing Library.
• The second override is for Cypress files — this tells ESLint to lint Cypress TypeScript files using their own tsconfig.

✅ TypeScript: tsconfig.json

Make sure Cypress is excluded from your main TS project (to avoid type conflicts):

json
1{
2  "compilerOptions": {
3    "types": ["cypress", "node"]
4  },
5  "exclude": ["cypress", "cypress.config.ts"]
6}

Then, create a cypress/tsconfig.json:

json
1{
2  "extends": "../tsconfig.json",
3  "compilerOptions": {
4    "types": ["cypress"]
5  },
6  "include": ["**/*.ts"]
7}

🔍 Explanation:

• Cypress uses global types that could conflict with your main app if not isolated.
• By using a separate tsconfig.json under /cypress, you scope those types only to test files.

---

4. Cypress Folder Structure

After running npx cypress open, Cypress will generate this structure:

folder-structure
1cypress/
2├── downloads/        # Files downloaded during tests
3├── e2e/              # Place your test cases here
4│   └── students/
5│       └── classes_management.cy.ts
6├── fixtures/         # Mock data for tests
7│   └── example.json
8├── support/          # Custom commands and global config

You can organize tests by domain/module for clarity.

---

5. Example Test: Form Submission in Class Management

File: cypress/e2e/students/classes_management.cy.ts

ts
1// Optional: login before each test
2beforeEach(() => {
3  cy.login("Admin12", "Admin@123"); // Custom command from support/commands.ts
4});
5
6describe("Classes Management Component", () => {
7  it("successfully submits form", () => {
8    const classDetail = "HCM24_01";
9    cy.visit(`/classes/${classDetail}`);
10
11    cy.contains("button", "Send email").click();
12
13    cy.get("#RemindForm_EmailType").click({ force: true });
14    cy.get(".ant-select-dropdown").should("be.visible");
15    cy.contains(".ant-select-item-option", "Inform").click({ force: true });
16
17    cy.get("#RemindForm_EmailTemplateId").click({ force: true });
18    cy.contains(".ant-select-item-option", "Title Email Template").click({
19      force: true,
20    });
21
22    cy.contains("button", "Preview").click();
23    cy.contains("button", "Back").click();
24    cy.get(".btn-send-btn").click();
25
26    cy.wait(5000); // wait for backend response
27    cy.get(".Toastify__toast--success").should("be.visible");
28  });
29});

---

6. Add Cypress Script to package.json

json
1"scripts": {
2  "cypress:open": "cypress open",
3  "cypress:run": "cypress run"
4}

🔍 Explanation:

• cypress:open launches the interactive test runner UI.
• cypress:run runs tests headlessly (useful in CI/CD pipelines).

---

7. Running Cypress

Start your local React/Next.js server:

bash
1npm run dev

Then open Cypress:

bash
1npm run cypress:open

Select the .cy.ts test file to run it in your browser.

---

🔧 Optional Tips and Best Practices

• ✅ Use cy.intercept() to stub or spy on API calls.
• ✅ Write reusable custom commands in cypress/support/commands.ts.
• ✅ Prefer data-testid attributes over class or ID selectors.
• ✅ Use cy.wait() only as a last resort; prefer asserting visibility or XHR completion.
• ✅ Integrate Cypress into CI pipelines for continuous quality checks.

---

✅ Summary

Using Cypress with React + TypeScript makes E2E testing simple, reliable, and maintainable. By properly setting up configuration files, separating TypeScript contexts, and organizing test files clearly, you’ll be able to create robust tests that simulate real user behavior.

Cypress gives you confidence in every deploy, reduces regressions, and catches bugs before they reach production.