jest-vue前端自動化測試實踐02—jest基本用法
- 2019 年 11 月 1 日
- 筆記
jest-vue前端自動化測試實踐02—jest基本用法
[toc]
Write By CS逍遙劍仙 我的主頁: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: [email protected]
本節程式碼地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自動化測試目錄
1. matchers 匹配器
測試工具中最基本的就是斷言匹配器，下面是 jest 中常用的匹配器。
【 toBe 】【 toEqual 】
test('jest匹配器', () => { const a = 1; const b = { one: 1 }; expect(a).toBe(1); // expect(b).toBe({ one: 1 }); // false 地址不同 expect(b).toEqual({ one: 1 }); })
【 toBeNull 】【 toBeUndefined 】【 toBeDefined 】【 toBeTruthy 】【 toBeFalsy 】
test('jest匹配器', () => { expect(null).toBeNull(); })
【 not 】
test('jest匹配器', () => { expect(1).not.toBeFalsy(); })
Number
【 toBeCloseTo 】【 toBeGreaterThan 】【 toBeLessThan 】【 toBeGreaterThanOrEqual 】【 toBeLessThanOrEqual 】
test('jest匹配器', () => { expect(10).toBeGreaterThanOrEqual(10); expect(0.1 + 0.2).toBeCloseTo(0.3); })
String
【 toMatch 】
test('jest匹配器', () => { expect('www.csxiaoyao.com').toMatch('csxiaoyao'); })
Array/Set
【 toContain 】
test('jest匹配器', () => { const a = ['www', 'csxiaoyao', 'com']; expect(a).toContain('csxiaoyao'); expect(new Set(a)).toContain('csxiaoyao'); })
Object
【 toMatchObject 】
test('jest匹配器', () => { expect({ data: { success: true } }).toMatchObject({ data: { success: true } }); })
異常
【 toThrow 】
test('jest匹配器', () => { const a = () => { throw new Error('this is a new error') }; expect(a).toThrow(); expect(a).toThrow('this is a new error'); expect(a).toThrow(/this is a new error/); // expect(a).not.toThrow(); // 沒有拋出異常 })
其他
【 any 】…
2. hook 鉤子函數
beforeAll / afterAll / beforeEach / afterEach
beforeAll(() => { console.log('beforeAll') }) afterAll(() => { console.log('afterAll') }) // 每個用例執行前執行，一般用於針對不同用例初始化不同的實例對象 beforeEach(() => { console.log('beforeEach') // 實例化 counter = new Counter() }) afterEach(() => { console.log('afterEach') })
3. describe 分組
可以用於限定作用域，可以與鉤子函數配合使用，寫在不同層級的鉤子函數，作用域不同
describe('測試分組和鉤子函數', () => { let counter = null // 外層 beforeEach beforeEach(() => { counter = new Counter() }) // 分組1 describe('測試分組1程式碼', () => { // 【 使用 describe 限定作用域 】 // 內層 beforeEach 不會對後面的同級 describe 產生影響 beforeEach(() => { console.log('beforeEach test group1') }) test('xxx', () => { /* ... */ }) // ... }) // 分組2 describe('測試分組2程式碼', () => { test('xxx', { /* ... */ }) // ... }) })
4. only 跳過 case
test('該 case 被跳過', () => { /* ... */ }) test.only('只測試這個用例，跳過其他 case', () =>{ /* ... */ }) test('該 case 被跳過', () => { /* ... */ })
5. snapshot 快照測試
快照測試適用於配置文件、UI等內容的測試，快照保存上次運行的結果存儲在 __snapshots__ 下，如果兩次執行結果不一致則不通過，需要檢查後更新快照，按 u 更新全部快照，按 i 進入互動式單獨更新。例如測試下面的配置文件 snapshot.js
// 固定值 export const generateConfig1 = () => { return { server: 'http://localhost', port: 8080 } } // 存在變化的時間值 export const generateConfig2 = () => { return { server: 'http://localhost', port: 8080, time: new Date() } }
編寫測試用例，注意匹配時間類變化值
import { generateConfig1, generateConfig2 } from "./11-snapshot"; test("測試 generateConfig1 函數", () => { expect(generateConfig1()).toMatchSnapshot(); }); test("測試 generateConfig2 函數", () => { expect(generateConfig2()).toMatchSnapshot({ // 用於匹配時間類變化的值 time: expect.any(Date) }); });
inline snapshot，可以將快照保存在用例中，需要安裝 prettier 模組
$ npm install prettier --save
編寫測試用例
test("測試 generateConfig2 函數 inline", () => { expect(generateConfig2()).toMatchInlineSnapshot({ time: expect.any(Date) }); });
執行後快照保存在用例文件中
test("測試 generateConfig2 函數 inline", () => { expect(generateConfig2()).toMatchInlineSnapshot({ time: expect.any(Date) }, ` Object { "port": 8080, "server": "http://localhost", "time": Any<Date>, } ` ); });
6. DOM 測試
dom 測試一般用於測試 UI，例如需要測試下面 jquery 操作 dom 的程式碼 dom.js
import { jsdom } from 'jsdom' import $ from 'jquery' const addDivToBody = () => { $('body').append('<div/>') }; export default addDivToBody
編寫測試用例，node 不具備 dom，因此 jest 在 node 環境下模擬了 dom api — jsDom
import addDivToBody from './dom' import $ from 'jquery' test('測試 addDivToBody', () => { addDivToBody() addDivToBody() expect($('body').find('div').length).toBe(2) })
