【前端自动化测试】浅谈前端自动化测试及Jest框架

一、前端自动化测试产生的背景及原理

        对于前端开发人员来讲，日常开发面对的bug类型主要有：安全性、逻辑、性能、UI/交互等，特别是复杂场景或老项目修改。bug本身并不可怕，可怕的是带着bug上线，为了防止bug上线，codereview、测试团队介入排队代码潜在的问题、灰度发布机制帮助我们做局部验证。

        目前前端团队已经通过TypeScript、Flow、EsLint、StyleLint、Sonar 有效提高前端代码质量，而前端自动化测试可以帮我们进一步避免bug的产生，写出更高质量的代码。而测试的种类分为单元测试、集成测试、endToEnd 端到端测试、回归测试、性能测试、压力测试等等一系列测试方案。

math.js

export function add (a, b) {
  return a + b
}

export function minus(a, b) {
  return a - b 
}

export function multi(a, b) {
  return a * b
}

 math.test.js

import {add, minus, multi} from './math'

test('测试加法 3 + 7', () => {
  expect(add(3, 7)).toBe(10)
})

test('测试减法 3 - 3', () => {
  expect(minus(3, 3)).toBe(0)
})

test('测试乘法 3 * 3', () => {
  expect(multi(3, 3)).toBe(9)
})

由以上例子可以发现，测试文件的语法模式是，拿计算结果和预期结果相比较，如果相等通过测试，否则抛异常。该原理转换为js实现：

function expect(result){
  return {
    toBe: function(actual) {
      if(result !== actual) {
        throw new Error('预期值和实际值不相等')
      }
    }
  }
}

function test(desc, fn){
  try {
    fn()
    console.log(`${desc} 通过测试`)
  } catch (e) {
    console.log(`${desc} 没有通过测试`)
  }
}

二、自动化测试框架JEST

JEST的几个优点：速度快、API简单、易配置、隔离性好、监控模式、IDE整合、Snapshot、多项目并行、覆盖率、Mock丰富。 

首先，需要安装node环境 

使用yarn/npm 安装 Jest：

// yarn 安装
yarn add --dev jest

// npm 安装
npm install --save-dev jest

math.js 

export function add (a, b) {
  return a + b
}

export function minus(a, b) {
  return a - b 
}

export function multi(a, b) {
  return a * b
}

math.test.js

import {add, minus, multi} from './math'

test('测试加法 3 + 7', () => {
  expect(add(3, 7)).toBe(10)
})

test('测试减法 3 - 3', () => {
  expect(minus(3, 3)).toBe(0)
})

test('测试乘法 3 * 3', () => {
  expect(multi(3, 3)).toBe(9)
})

function expect(result){
  return {
    toBe: function(actual) {
      if(result !== actual) {
        throw new Error( `预期值和实际值不相等 预期是${actual} 结果是 ${result}`)
      }
    }
  }
}

function test(desc, fn){
  try {
    fn()
    console.log(`${desc} 通过测试`)
  } catch (e) {
    console.log(`${desc} 没有通过测试 ${e}`)
  }
}
/*
 * 运行 npm run test 时先判断是否有babel-jest 或 babel-core 然后取 .babelrc 配置。在运行测试之前，结合babel，先把代码转化成common语法，再运行转化过的测试用例代码
 */

package.json

...
"scripts": {
    "test": "jest --watchAll"
  },
...