Testing Next.js Applications with Cypress/

...

/

Solution: Cypress Component Testing

Solution: Cypress Component Testing

Learn how to mock dates in Cypress component tests.

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
...