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

Solution: Cypress Component Testing

Understand how to implement Cypress component tests for the TimeCalculator component by providing correctly manipulated date props. Learn techniques to pass future and past dates, ensuring your component returns accurate results in a testing environment.

We'll cover the following...

To complete the challenge we need to give the TimeCalculator component the correct dates to ensure accurate results.

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

describe("timeCalculator", () => {
  it("shows correct date in 2 days", () => {
    const mockDateNow = new Date(2023, 0, 1, 12, 0);
    cy.clock(mockDateNow);
    cy.mount(<TimeCalculator date={new Date(2023, 0, 3, 12, 0)} />);

    cy.contains("in 2 days");
  });

  it("shows correct date in 2 days", () => {
    const mockDateNow = new Date(2023, 0, 1, 12, 0);
    cy.clock(mockDateNow);
    cy.mount(<TimeCalculator date={new Date(2022, 11, 30, 12, 0)} />);

    cy.contains("2 days ago");
  });

  it("shows correct date next week", () => {
    const mockDateNow = new Date(2023, 0, 1, 12, 0);
    cy.clock(mockDateNow);
    cy.mount(<TimeCalculator date={new Date(2023, 0, 8, 12, 0)} />);

    cy.contains("next week");
  });

  it("shows correct date last week", () => {
    const mockDateNow = new Date(2023, 0, 1, 12, 0);
    cy.clock(mockDateNow);
    cy.mount(<TimeCalculator date={new Date(2022, 11, 25, 12, 0)} />);

    cy.contains("last week");
  });
});

export {};
Solution to the challenge
...