如何在Cypress中用动态模拟数据测试日期判断弹窗组件？

问题背景 #

我需要测试一个弹窗组件：当接口返回的日期距离当前时间超过20分钟时，弹窗会显示。但目前使用静态日期的fixture文件，几天后流水线中的测试就会失效——因为静态日期不再满足「超过当前时间20分钟」的条件。其中isExceedTime函数负责判断日期是否超出当前时间20分钟并返回布尔值。

相关代码如下：

a.json（静态Fixture）

{
  "date": "2023-03-06T17:16:52.655564"
}

a.test.js（测试代码）

it('should show dialog', () => {
   cy.intercept(
    {
      method: 'GET',
      pathname: '/api/a',
      https: true,
    },
    {
      fixture: `a.json`,
    },
  ).as("mockData")

  cy.visit("/")

  cy.wait("@mockData")
   
  cy.findByRole('dialog').should('exist');
});

a.js（弹窗组件）

import React from "react";
import isExceedTime from "isExceedTime"

export const Popup = ({ date }) => {

const [open, setIsOpen] = React.useState(isExceedTime(date))

if(!open){
 return null;
}

return (
    <div className="popup-container" role="dialog">
      <div className="popup-body">
        <h1>adasdasdasdasd</h1>
      </div>
    </div>
);
};

解决方案 #

核心思路是动态生成符合条件的日期，替代静态Fixture中的固定日期，确保每次测试运行时，日期都满足「超过当前时间20分钟」的判断条件。

方案1：直接在拦截中返回动态日期

修改测试代码，生成一个比当前时间早21分钟的日期（确保超过20分钟阈值），直接作为接口返回值：

it('should show dialog', () => {
  // 生成比当前时间早21分钟的ISO格式日期
  const expiredDate = new Date(Date.now() - 21 * 60 * 1000).toISOString();

  cy.intercept(
    {
      method: 'GET',
      pathname: '/api/a',
      https: true,
    },
    {
      date: expiredDate
    }
  ).as("mockData")

  cy.visit("/")
  cy.wait("@mockData")
  cy.findByRole('dialog').should('exist');
});

方案2：修改现有Fixture后返回

如果需要保留Fixture的其他字段，可先读取Fixture，再动态更新date字段：

it('should show dialog', () => {
  cy.fixture('a.json').then(fixture => {
    // 更新Fixture中的日期为过期日期
    fixture.date = new Date(Date.now() - 21 * 60 * 1000).toISOString();
    
    cy.intercept(
      {
        method: 'GET',
        pathname: '/api/a',
        https: true,
      },
      fixture
    ).as("mockData")
  })

  cy.visit("/")
  cy.wait("@mockData")
  cy.findByRole('dialog').should('exist');
});

效果说明 #

无论测试何时运行，动态生成的日期都会相对于当前时间提前21分钟，始终满足isExceedTime的判断条件，避免了静态Fixture随时间失效的问题。

内容的提问来源于stack exchange，提问作者Mehmet Can BOZ