Cypress测试时区模拟问题：解决CI时区差异引发的测试失败

问题原因 #

你用timezone-mock在Jest里能生效，是因为Jest的测试完全运行在Node环境，mock的是Node端的Date对象。但Cypress是浏览器端测试，cy.visit打开的是真实浏览器实例，浏览器里的Date是独立于Node环境的，所以你在测试代码的before钩子中调用timezoneMock.register('UTC')，只会影响Node端的Date，对浏览器里的代码毫无作用，自然无法解决时区转换问题。

解决方案 #

方案1：修改前端代码，强制UTC格式化（推荐） #

既然你的需求是始终显示UTC时间，直接用date-fns-tz库的formatInTimeZone方法，显式指定时区为UTC，彻底避免浏览器时区干扰：

// 前端代码中替换原format方法
import { formatInTimeZone } from 'date-fns-tz'

// 不管浏览器时区是什么，始终按UTC格式化
content = formatInTimeZone(new Date("2023-01-01T12:00:00Z"), 'UTC', 'dd MMM yyy HH:mm')

之后在Cypress测试中，直接断言预期的UTC时间即可：

it('鼠标悬停时显示正确的UTC时间戳', () => {
  cy.get('.target-div').trigger('mouseover')
  cy.get('.tooltip').should('have.text', '01 Jan 2023 12:00')
})

方案2：在Cypress中mock浏览器的Date对象 #

如果不想修改前端代码，可以在cy.visit时注入脚本，重写浏览器的Date对象，让它解析UTC结尾的日期字符串时保持UTC时间：

describe('Tooltip', () => {
  before(() => {
    cy.visit('/link', {
      onBeforeLoad(win) {
        const OriginalDate = win.Date
        // 重写Date构造函数
        win.Date = function(...args) {
          // 仅处理带Z的UTC日期字符串
          if (args.length === 1 && typeof args[0] === 'string' && args[0].endsWith('Z')) {
            const utcDate = new OriginalDate(args[0])
            // 用UTC时间戳构造Date，避免时区转换
            return new OriginalDate(Date.UTC(
              utcDate.getUTCFullYear(),
              utcDate.getUTCMonth(),
              utcDate.getUTCDate(),
              utcDate.getUTCHours(),
              utcDate.getUTCMinutes(),
              utcDate.getUTCSeconds()
            ))
          }
          return new OriginalDate(...args)
        }
        // 继承Date的静态方法（如Date.now()）
        Object.assign(win.Date, OriginalDate)
      }
    })
  })

  it('鼠标悬停时显示正确的UTC时间戳', () => {
    cy.get('.target-div').trigger('mouseover')
    cy.get('.tooltip').should('contain', '01 Jan 2023 12:00')
  })
})

内容的提问来源于stack exchange，提问作者Catalin B