Jest 中的 snapshot 快照測試 基礎

項目中經常有一些配置文件。比如

export const generateConfig  = () => {
    return {
        server: 'http://localhost',
        port: '8080'
    }
}

那測試它的測試用例可以這樣寫

import { generateConfig } from './snapshot.js'

test('測試 generateConfig', () => {
    expect(generateConfig()).toEqual({
        server: 'http://localhost',
        port: '8080'
    })
})

當配置項不斷增加的時候，就需要不斷去更改測試用例。

那麼我們可以這樣寫測試用例：

import { generateConfig } from './snapshot.js'

test('測試 generateConfig', () => {
    expect(generateConfig()).toMatchSnapshot()
})

toMatchSnapshot() 會爲expect 的結果做一個快照並與前面的快照做匹配。（如果前面沒有快照那就保存當前生成的快照即可）

這在配置文件的測試的時候是很有用的，因爲配置文件，一般不需要變化。

當然，確實要改配置文件，然後要更新快照，也可。

如下

上圖說了，按‘u’ 可以更新快照（先按w，當有多個快照報錯時，可以選i 一個個更新快照）。

有一種情況，假設配置項中有隨機數或者當前時間，如下。

export const generateConfig  = () => {
    return {
        server: 'http://localhost',
        port: '8080',
        time: new Date()
    }
}

那case 中snapshot 就需要使用expect.any() 了，如下

import { generateConfig } from './snapshot.js'

test('測試 generateConfig', () => {
    expect(generateConfig()).toMatchSnapshot({
        time: expect.any(Date)
    })
})

之前使用snapshot 的時候，都會生成一個snapshot 的文件。

下面我們來使用行內snapshot。要使用行內snapshot ，我們需要在項目中安裝 prettier

npm install [email protected]

然後，我們改一下測試用例

import { generateConfig } from "./snapshot.js";

test("測試 generateConfig", () => {
  expect(generateConfig()).toMatchInlineSnapshot(
    {
      time: expect.any(Date)
    }
  );
});

運行測試用例，會發現測試用例代碼變成如下了。快照被保存到了測試代碼中 

import { generateConfig } from "./snapshot.js";

test("測試 generateConfig", () => {
  expect(generateConfig()).toMatchInlineSnapshot(
    {
      time: expect.any(Date)
    },
    `
    Object {
      "port": "8080",
      "server": "http://localhost",
      "time": Any<Date>,
    }
  `
  );
});