如何在Jest中测试调用Quasar date.formatDate的日期格式化工具类

架构老林

2026-10-7

错误原因&修复方案

核心问题1：变量大小写不匹配

你在工具类中导入Quasar的date模块时指定的别名是大写开头的DateUtils，但调用formatDate方法时用的是小写开头的dateUtils，JavaScript大小写敏感，该笔误是直接触发报错的首要原因。

核心问题2：Jest环境未适配Quasar依赖

修复大小写后如果仍报错，是因为Quasar默认的生产包在Node/Jest环境下运行时，内部依赖的运行时上下文未初始化，会出现内部属性访问异常。

分步修复

第一步：修复工具类命名笔误

调整FormatDate类的变量大小写：

import { date as DateUtils } from 'quasar'

export class FormatDate {
  static dateTime(date: Date) : string {
    // 修正为导入时的大写别名
    return DateUtils.formatDate(date, "DD.MM.YYYY HH:mm:ss")
  }
}

第二步：适配Jest测试（二选一即可）

方案1：Mock Quasar依赖（更推荐，单元测试仅验证自身逻辑）

不需要依赖Quasar的真实实现，直接在测试文件开头添加mock逻辑即可：

import { FormatDate } from '@/components/FormatDate.ts'

// Mock Quasar的date模块
jest.mock('quasar', () => ({
  date: {
    formatDate: jest.fn((date, format) => {
      const d = new Date(date)
      const pad = (n: number) => n.toString().padStart(2, '0')
      return `${pad(d.getDate())}.${pad(d.getMonth()+1)}.${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
    })
  }
}))

it('Should get the correct formatted date', () => {
  // 直接用原生Date构造即可，注意JS月份从0开始，11月对应参数为10
  const date = new Date(2021, 10, 28, 12, 11, 0)
  expect(FormatDate.dateTime(date)).toEqual('28.11.2021 12:11:00')
})