javascript - Jest 单元测试疑难点入门 - 原创小文章

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

纯真的骆驼 · 旧金山简介 - wtcf.travel· 2 月前 ·

果断的跑步鞋 · 内容集合 | Docs· 3 月前 ·

有胆有识的黑框眼镜 · 天玑处理器秒解bl教程-西瓜视频· 3 月前 ·

不羁的课本 · Bibbidi-Bobbidi-Boo - ...· 9 月前 ·

眉毛粗的匕首 · Kmodloader can not ...· 1 年前 ·

- ```
coverageThreshold: {
 './src/common/js/*.js': {
   branches: 80, // 覆盖代码逻辑分支的百分比
   functions: 80, // 覆盖函数的百分比
   lines: 80, // 覆盖代码行的百分比
   statements: -10 // 如果有超过 10 个未覆盖的语句，则 jest 将失败
},
```
- ```
// 从那些文件夹中生成覆盖率信息，包括未设置对其编写测试用例的文件，解决遗漏新文件的测试覆盖问题
collectCoverageFrom: [
  './src/common/js/*.{js,jsx}',
  './src/components/**/*.{js,vue}',
],
```

// jest.config.js 设置前置运行文件，在每个测试文件执行前，会运行该文件，实现添加某些全局方法的作用
setupFilesAfterEnv: ['./jest.setup.js'],

// ./jest.setup.js
import { shallowMount } from '@vue/test-utils'
// 向全局 wrapper 挂载通用函数 styles，返回该元素的内联样式（因为 jsdom 只支持内联样式，不支持检测 class 中的样式），或某内联样式的值
function addStylesFun() {
  // 生成一个临时组件，获取 vueWrapper 及 domWrapper 实例，挂载 style 方法
  const vueWrapper = shallowMount({ template: '<div>componentForCreateWrapper</div>' })
  const domWrapper = vueWrapper.find('div')
  vueWrapper.__proto__.styles = function(styleName) {
    return styleName ? this.element.style[styleName] : this.element.style
  domWrapper.__proto__.styles = function(styleName) {
    return styleName ? this.element.style[styleName] : this.element.style
addStylesFun()

test('the data is peanut butter', () => {
  return expect(fetchData()).resolves.toBe('peanut butter');
});

test('当前月，测试参数 new Date 默认值', () => {
  // 覆写 new Date 的值，模拟为 2022/01/23 17:13:03 ，解决默认参数为 new Date 时，无法覆盖的问题
  const mockDate = new Date(1642938133000)
  const spyDate = jest
    .spyOn(global, 'Date') // 即监听 global.Date 变量
    .mockImplementationOnce(() => {
      spyDate.mockRestore() // 需要在第一次执行后，马上消除该 mock，避免后续影响后续 new Date
      return mockDate
  let [starTime, endTime] = getMonthRange()
  expect(starTime).toBe(1640966400000) // 2022/01/01 00:00:00
  expect(endTime).toBe(1643644799000) // 2022/01/31 23:59:59
})

const OriginDate = global.Date
Date = jest.fn(() => {
  Date = OriginDate
  return new OriginDate(1642938133000)
})

beforeAll(() => {
    jest.useFakeTimers('modern')
    jest.setSystemTime(new Date(1466424490000)) // 因为 Vue Test Utils 中使用的 jest 是 24.9 的版本，没有该函数
  afterEach(() => {
    jest.restoreAllMocks()
  })

describe.each([
  [1, 1, 2], // 每一行是代表运行一次测试用例
  [1, 2, 3], // 每一行中的参数，是运行该次测试用例是用到的数据，前两个是参数，第三个是测试期望值
  [2, 1, 3],
  '.add(%i, %i)', // 设置 describe 的标题，%i 是 print 的变量参数
 (a, b, expected) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
});

stages:
- merge-unit-test
- merge-unit-test-fail-callback
- other-test
# merge 请求时执行的 job
step-merge:
stage: merge-unit-test
# 使用的 gitlab runner
tags: [front-end]
# 仅在提出代码合并请求时执行
only: [merge_requests]
# 排除特定分支的代码合并请求，即在特定分支的代码合并请求时，不执行该 job
except:
  variables:
    - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "qa"
# 运行的命令
script:
  - npm install --registry=https://registry.npm.taobao.org # 安装依赖
  # 2>&1 标准错误定向到标准输出
  # Linux tee 命令用于读取标准输入的数据，并将其内容输出成文件。
  - npm run test 2>&1 | tee ci-merge-unit-test.log # 执行单元测试，并将在控制台输出的信息，保存在 ci-merge-unit-test.log 文件中，以便后续分析
  - echo 'merge-unit-test-finish'
# 定义往下一个 job 需要传递的资料
artifacts:
  when: on_failure # 默认情况下，只会在 success 保存，可以通过这个标识符进行配置
  paths:  # 定义需要传递的文件
    - ci-merge-unit-test.log
# merge 检测失败时执行的 node 命令
step-merge-unit-test-fail-callback:
stage: merge-unit-test-fail-callback
# 当上一个 job 执行失败时，才会触发
when: on_failure
tags: [front-end]
only: [merge_requests]
except:
  variables:
    - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "qa"
script:
  - node ci-merge-unit-test-fail-callback.js $CI_PROJECT_NAME $CI_JOB_ID # 执行 node 脚本，进行飞书通知，并携带对应链接，进行快速定位

const fs = require('fs')
const path = require('path')
const https = require('https')
const projectName = process.argv[2] // 项目名
const jobsId = process.argv[3] // 执行的 ci 任务 id
const logsMainMsg = fs.readFileSync(path.join(__dirname, 'ci-merge-unit-test.log'))
.toString()
.split('\n')
.filter(line => line[line.length - 1] !== '|' && line.indexOf('PASS ') !== 0) // 过滤不关注的信息
.join('\n')
const data = JSON.stringify({
msg_type: 'post',
content: {
  post: {
    zh_cn: {
      content: [
            tag: 'a',
            text: 'gitlab merge 单元测试',
            href: `https://xxx/fe-team/${projectName}/-/jobs/${Number(jobsId) - 1}`
            tag: 'text',
            text: `运行失败\r\n${logsMainMsg}`
const req = https.request({
hostname: 'open.feishu.cn',
port: 443,
path: '/open-apis/bot/v2/hook/xxx',
method: 'POST',
headers: { 'Content-Type': 'application/json' }
}, res => {
console.log(`statusCode: ${res.statusCode}`)

Jest 单元测试疑难点入门

文章基调

测试的几个名称

jest 单元测试的原理与局限性

单元测试需要覆盖那些场景？

单元测试忽略原理

编写测试用例的正确姿势

添加 jest 全局自定义函数

钩子函数

快速单元测试技巧

jest 报告说明

模拟函数 ，不是模拟数据的函数

计时器模拟

测试快照

其他疑难杂症

gitlab-ci 单元测试相关配置