Search⌘ K
AI Features
Home
Courses
Testing Next.js Applications with Cypress

Solution: Cypress Spies

Explore how to leverage Cypress spies to verify that button click handlers are not called when buttons are disabled. This lesson helps you understand mounting components with props, forcing clicks, and making assertions on spy functions, enhancing your Cypress component testing skills.

We'll cover the following...

To complete the challenge, we need to use a spy to assert that the onClick handler doesn’t get called.

import { Button } from "../../src/Button";

describe("button", () => {

  it("disabled works", () => {
    cy.mount(
      <Button disabled={true} onClick={() => undefined} text={"Hello World"} />
    );

    cy.get("button").should("be.disabled");
  });

  it("button gets disabled", () => {
    cy.mount(
      <Button disabled={true} onClick={() => undefined} text={"Hello World"} />
    );

    cy.get("button").should("be.disabled");
  });

  it("disabled button cannot be clicked", () => {
    const spy = cy.spy().as("spy");
    cy.mount(<Button disabled={true} onClick={spy} text={"Hello World"} />);

    cy.get("button").click({ force: true });

    cy.get("@spy").should("not.have.been.called");
  });
});

export {};
Solution to the Cypress spy challenge

Explanation

  • Lines ...