（十）snapshot快照測試

1、快照測試

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

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

對應它的測試用例可以這樣寫　snapshot.test.js　

import { generateConfig } from "./snapshot.js";
test('測試 generateConfig', () => {
	expect(generateConfig()).toEqual({
		server: 'http://localhost',
		port: '8080',
		domain:'localhost'
	})
})

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

那么我們可以使用快照寫測試用例：

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

運行測試用例之后會自動生成快照文件，對應目錄如下：　　

　

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

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

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

2、配置文件修改

如果配置文件發生變化，運行時時會提示已經發生變化，可以根據提示的命令確定修改文件：‘npm test -- -u’

 

 如果添加new Date()這樣的參數，配置文件在實時的更新，如何處理呢？對應代碼如下：

snapshot.js

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

測試用例snapshot.test.js

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

test('測試 generateConfig', () => {

	expect(generateConfig()).toMatchSnapshot({
			time :expect.any(Date)//Date String Number等等
		})
})

3、行內快照　　

首先需要安裝 prettier ，否則行內快照無法執行。

安裝命令：npm install prettier

 

安裝完成之后，修改測試用例：

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

運行測試用例之后，會多出一個參數來，結果如下：

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