【Vue Unit Test / Vue3】mock Date( ) 這回事

有時候要測的 component 會渲染出時間的內容，因為會變來變去的，對 snapshot 很不利。

但也會有躲不掉的狀況，這時候就要 mock new Date()

這個問題卡我一陣，最後在 這裡 找到答案，可以看見，裡面很多 extends Date class 的示範：

const mockDate = new Date('2018,5,26')

global.Date = class extends Date {
  constructor() {
    return mockDate
  }
}

在本機跑完美運作，原本內容浮動的 now Date() 完美被模擬成 2018/5/26

但因為我在 Bitbucket 上也有跑測試，就失敗了。

    -       mindate="Sat May 26 2018 00:00:00 GMT+0800 (台北標準時間)"

    -       modelvalue="Sat May 26 2018 00:00:00 GMT+0800 (台北標準時間)"

    +       mindate="Sat May 26 2018 00:00:00 GMT+0000 (Coordinated Universal Time)"

    +       modelvalue="Sat May 26 2018 00:00:00 GMT+0000 (Coordinated Universal Time)"

     

因為本機的時間跟 Bitbucket 環境不同的關係。

於是我加了這一行 mockDate.toString = jest.fn().mockReturnValue('mock date')，把mockDate 這個物件的 toString 整個 mock 掉。

生成的快照變成
    mindate="mock date"
    modelvalue="mock date"

完整代碼如下：

const mockDate = new Date('2018,5,26')
mockDate.toString = jest.fn().mockReturnValue('mock date')

config.global.components = { Button }
global.Date = class extends Date {
  constructor() {
    return mockDate
  }
}