前端自动化测试jest教程8-snapshot快照测试

准备条件

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

这节教程主要讲解在jest中的怎样进行快照测试，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空

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

export const data1 = () => {
  return {
    name: 'Jsoning',
    age: 26,
    time: '2020.1.1'
  }
}

export const data2 = () => {
  return {
    name: 'Jsoning',
    age: 26,
    time: new Date()
  }
}

在 index.test.js 中写入一些测试实例

import { data1, data2 } from "./index"

it('测试快照 data1', () => {
  expect(data1()).toMatchSnapshot({
    name: 'Jsoning',
    age: 26,
    time: '2020.1.1'
  })
})

it('测试快照 data3', () => {
  expect(data2()).toMatchSnapshot({
    name: 'Jsoning',
    age: 26,
    time: expect.any(Date) //用于声明是个时间类型，否则时间会一直改变，快照不通过
  })
})

• toMatchSnapshot会将参数将快照进行匹配
• expect.any(Date) 用于匹配一个时间类型

执行npm run test会生成一个__snapshots__文件夹，里面是生成的快照，当你修改一下测试代码时，会提示你，快照不匹配。
如果你确定你需要修改，按 u 键，即可更新快照。这用于UI组件的测试非常有用

如果你不想将快照生成一个文件，你可以这样做

• 将__snapshots__ 删除
• npm install prettier --save 安装prettier模块，在行内生成快照依赖这个模块
• 编写测试用例
  在index.test.js中写入

import { data1, data2 } from "./index"

it('测试快照 data1', () => {
  expect(data1()).toMatchInlineSnapshot({
    name: 'Jsoning',
    age: 26,
    time: '2020.1.1'
  })
})

it('测试快照 data3', () => {
  expect(data2()).toMatchInlineSnapshot({
    name: 'Jsoning',
    age: 26,
    time: expect.any(Date) //用于声明是个时间类型，否则时间会一直改变，快照不通过
  })
})

• toMatchInlineSnapshot 在行内匹配快照
  运行 npm run test 即可发现快照生成在文件内部

快照内容就这些，快照测试用于测试UI组件是非常有用的，防止项目中其他人误修改文件

下一节教程将介绍在TDD+单元测试，BDD+集成测试

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

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