Jest 中鉤子函數

首先，我們來寫一個類，並把它放入一個文件 counter.js 中，代碼如下。

class Counter {
    constructor () {
        this.number = 0
    }
    addOne () {
        this.number += 1
    }
    minusOne () {
        this.number -= 1
    }
}

export default Counter

下面，我們來寫一個測試文件，測試這個類。如下。

import Counter from './counter.js'

const counter = new Counter()

test('測試 Counter 中 addOne 方法', () => {
    counter.addOne()
    expect(counter.number).toBe(1)
})

test('測試 Counter 中 minusOne 方法', () => {
    counter.minusOne()
    expect(counter.number).toBe(0)
})

上面，兩個測試用例之間的數據是有關聯的，這樣是不太好的。

Jest 提供給我們一下鉤子函數，在處理這種問題的時候，就可以使用。

這些鉤子函數例如，beforeAll, afterAll, beforeEach ...

參考官網介紹https://jestjs.io/docs/en/api#beforeallfn-timeout

這裏我們使用beforeEach 就好。

import Counter from './counter.js'

let counter = null
beforeEach(() => {
    counter = new Counter()
})

test('測試 Counter 中 addOne 方法', () => {
    counter.addOne()
    expect(counter.number).toBe(1)
})

test('測試 Counter 中 minusOne 方法', () => {
    counter.minusOne()
    expect(counter.number).toBe(-1)
})

此外，我們還可以對測試用例進行分組，如下。

import Counter from './counter.js'

let counter = null
beforeEach(() => {
    counter = new Counter()
})

describe('測試增加', () => {
    test('測試 Counter 中 addOne 方法', () => {
        counter.addOne()
        expect(counter.number).toBe(1)
    })
    test('測試 Counter 中 addOne 方法', () => {
        counter.addOne()
        expect(counter.number).toBe(1)
    })
})

describe('測試減少', () => {
    test('測試 Counter 中 minusOne 方法', () => {
        counter.minusOne()
        expect(counter.number).toBe(-1)
    })
    test('測試 Counter 中 minusOne 方法', () => {
        counter.minusOne()
        expect(counter.number).toBe(-1)
    })
})

其實上面的代碼，就等價於下面。

import Counter from './counter.js'

describe('測試Counter', () => {
    let counter = null
    beforeEach(() => {
        counter = new Counter()
    })

    describe('測試增加', () => {
        test('測試 Counter 中 addOne 方法', () => {
            counter.addOne()
            expect(counter.number).toBe(1)
        })
        test('測試 Counter 中 addOne 方法', () => {
            counter.addOne()
            expect(counter.number).toBe(1)
        })
    })

    describe('測試減少', () => {
        test('測試 Counter 中 minusOne 方法', () => {
            counter.minusOne()
            expect(counter.number).toBe(-1)
        })
        test('測試 Counter 中 minusOne 方法', () => {
            counter.minusOne()
            expect(counter.number).toBe(-1)
        })
    })
})

那麼，就很容易看出 beforeEach 這些鉤子，是屬於describe 的（作用域），我們可以在子的 describe 中也增加 鉤子，且它的生效範圍爲它下的所有的測試用例。