前端自动化测试jest教程5-钩子函数

准备条件

以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章

这节教程主要讲解在jest中的钩子函数以及钩子函数的作用域，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空

jest中有4个钩子函数

• beforeAll：所有测试之前执行
• afterAll：所有测试执行完之后
• beforeEach：每个测试实例之前执行
• afterEach：每个测试实例完成之后执行

看例子更容易理解

在 index.js 中写入一些待测试方法

export default class compute {
  constructor() {
    this.number = 0
  }
  addOne() {
    this.number += 1
  }
  addTwo() {
    this.number += 2
  }
  minusOne() {
    this.number -= 1
  }
  minusTwo() {
    this.number -= 2
  }
}

在 index.test.js 中写测试实例

import compute from './index'

const Compute = new compute()

beforeAll(() => {
  console.log('---beforeAll---')
})

afterAll(() => {
  console.log('---afterAll---')
})

beforeEach(() => {
  console.log('---beforeEach---')
})

afterEach(() => {
  console.log('---afterEach---')
})

test('测试 addOne', () => {
  Compute.addOne()
  expect(Compute.number).toBe(1)
})

test('测试 minusOne', () => {
  Compute.minusOne()
  //这里用的同一个Computer实例，上面 +1 ，这里 -1，所以为0
  expect(Compute.number).toBe(0)
})

运行一下查看结果

这里可以看到测试用例全部通过，重点是钩子函数的执行顺序
---beforeEach---和---afterEach---执行了两边，因为有两个测试实例

这里两个测试实例相互之间影响了，共用了一个compont实例，我们可以将const Compute = new compute()放在beforEach里面就可以解决了，每次测试实例之前先重新new compute

describe

describe相当于一个块，可以将测试用例放在一个块中

修改index.test.js中的代码

import compute from './index'

let Compute = null

beforeAll(() => {
  console.log('---beforeAll---')
})

afterAll(() => {
  console.log('---afterAll---')
})

beforeEach(() => {
  Compute = new compute()
  console.log('---beforeEach---')
})

afterEach(() => {
  console.log('---afterEach---')
})

describe('测试加法', () => {
  test('测试 addOne', () => {
    Compute.addOne()
    expect(Compute.number).toBe(1)
  })

  test('测试 addTwo', () => {
    Compute.addTwo()
    expect(Compute.number).toBe(2)
  })
})

describe('测试减法', () => {
  test('测试 minusOne', () => {
    Compute.minusOne()
    expect(Compute.number).toBe(-1)
  })
  test('测试 minusTwo', () => {
    Compute.minusTwo()
    expect(Compute.number).toBe(-2)
  })
})

这样修改完后，测试实例之前不会相互影响，并且将测试分成了两个块

之前我们写测试用例都没有加describe，默认情况下，是有一个describe在外面包裹的，是可以省略
describe 方法里面也是有以上4个钩子函数的，因此我们在里面写上钩子函数，并查看他们的执行顺序

import compute from './index'

let Compute = null

beforeAll(() => {
  console.log('---beforeAll---')
})

afterAll(() => {
  console.log('---afterAll---')
})

beforeEach(() => {
  Compute = new compute()
  console.log('---beforeEach---')
})

afterEach(() => {
  console.log('---afterEach---')
})

describe('测试加法', () => {
  beforeAll(() => {
    console.log('---测试加法beforeAll---')
  })

  afterAll(() => {
    console.log('---测试加法afterAll---')
  })

  beforeEach(() => {
    Compute = new compute()
    console.log('---测试加法beforeEach---')
  })

  afterEach(() => {
    console.log('---测试加法afterEach---')
  })
  
  test('测试 addOne', () => {
    Compute.addOne()
    expect(Compute.number).toBe(1)
  })

  test('测试 addTwo', () => {
    Compute.addTwo()
    expect(Compute.number).toBe(2)
  })
})

describe('测试减法', () => {
  beforeAll(() => {
    console.log('---测试减法beforeAll---')
  })

  afterAll(() => {
    console.log('---测试减法afterAll---')
  })

  beforeEach(() => {
    Compute = new compute()
    console.log('---测试减法beforeEach---')
  })

  afterEach(() => {
    console.log('---测试减法afterEach---')
  })

  test('测试 minusOne', () => {
    Compute.minusOne()
    expect(Compute.number).toBe(-1)
  })
  test('测试 minusTwo', () => {
    Compute.minusTwo()
    expect(Compute.number).toBe(-2)
  })
})

这里一定要执行一下，查看这几个钩子的执行顺序，图片太长，我只贴补部分打印

再思考一下，如果我们不在测试实例中写入一些代码，执行顺序是怎样的呢？？？

import compute from './index'

let Compute = null
console.log(1)

beforeAll(() => {
  console.log('---beforeAll---')
})

afterAll(() => {
  console.log('---afterAll---')
})

beforeEach(() => {
  Compute = new compute()
  console.log('---beforeEach---')
})

afterEach(() => {
  console.log('---afterEach---')
})

describe('测试加法', () => {
  console.log(2)

  beforeAll(() => {
    console.log('---测试加法beforeAll---')
  })

  afterAll(() => {
    console.log('---测试加法afterAll---')
  })

  beforeEach(() => {
    Compute = new compute()
    console.log('---测试加法beforeEach---')
  })

  afterEach(() => {
    console.log('---测试加法afterEach---')
  })

  test('测试 addOne', () => {
    Compute.addOne()
    expect(Compute.number).toBe(1)
  })

  test('测试 addTwo', () => {
    Compute.addTwo()
    expect(Compute.number).toBe(2)
  })
})

describe('测试减法', () => {
  console.log(3)
  
  beforeAll(() => {
    console.log('---测试减法beforeAll---')
  })

  afterAll(() => {
    console.log('---测试减法afterAll---')
  })

  beforeEach(() => {
    Compute = new compute()
    console.log('---测试减法beforeEach---')
  })

  afterEach(() => {
    console.log('---测试减法afterEach---')
  })

  test('测试 minusOne', () => {
    Compute.minusOne()
    expect(Compute.number).toBe(-1)
  })
  test('测试 minusTwo', () => {
    Compute.minusTwo()
    expect(Compute.number).toBe(-2)
  })
})

执行npm run test查看结果

这里可以看到 1 2 3 最先被打印，随后再去执行钩子函数，也就是说不在钩子函数和测试用例中的代码，会被最先执行，因此在写测试用例的时候防止代码执行的不确定性，我们一定要把代码写在钩子函数或者测试用例里面

这节代码量很多，一定要自己动手试一下

下一节教程将介绍在jest中的Mock

本人能力有限，文章可能会有不正确或者不恰当的部分，希望你可以指出

关注公众号，和我一起学习前端必备技能，前端自动化测试jest