none

0%

前端测试框架 mocha+断语库 chai+vue 单元测试

发表于

Mocha

前端单元测试框架

https://mochajs.cn/

  • example
1
2
3
4
5
6
7
8
9
10
11
12
13
const assert = require('assert')
const add = (a: number, b: number): number => a + b

describe('test function add', function () {
  it('should return the sum of `a` and `b`', () => {
    assert.equal(add(1, 2), 3) //使用node提供的断言
  })
})

/*
  test function add
    √ should return the sum of `a` and `b`
*/

Chai

一个断言库

https://www.chaijs.com/

  • 通常的 mocha 框架一起使用
  • should
1
2
3
4
5
6
7
8
9
10
11
12
13
import { expect, assert } from 'chai'
const should = require('chai').should()

const str = 'hello world'

it('test should', () => {
  str.should.be.a('string')
  str.should.contain('hello')
})

/*
	  √ test should
*/
  • expect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { expect, assert } from 'chai'
const should = require('chai').should()

const stringify = (obj: any) => {
  const arr = []
  for (let key in obj) {
    arr.push(`${key}=${obj[key]}`)
  }
  return arr.join('&')
}

it('测试stringify obj-->jsonstr', () => {
  expect(stringify({ name: 'Aila', age: 23, help: '&aa&;' })).to.be.equal(
    'name=Aila&age=23&help=&aa&;'
  )
})

/*
	√ 测试stringify obj-->jsonstr
*/
  • assert
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { expect, assert } from 'chai'
const should = require('chai').should()

const substring = (str: string, index: number): string => str.slice(index)

describe('test function add', function () {
  it('should return the substring of `str', () => {
    assert.equal(substring('hello world', 6), 'world1')
  })
})

/*
  1) test function add
       should return the substring of `str:

      AssertionError: expected 'world' to equal 'world1'
      + expected - actual

*/

Vue 单元测试

  • @vue/test-utils
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--HelloWorld.vue-->

<template>
  <div class="hello">
    <h1 id="m">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
}
</script>

<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// HelloWorld.vue.spec.ts

import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue'
import { expect } from 'chai'
import { mount } from '@vue/test-utils'

describe('HelloWorld.vue', () => {
  it('原生自己测试vue 传递属性能否正常显示', () => {
    //原生自己测试vue
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor({
      propsData: { msg: 'hello world' },
    }).$mount()
    expect(vm.$el.querySelector('h1')?.innerHTML).to.be.eq('hello world')
  })
})
describe('HelloWorld.vue', () => {
  it('通过 @vue/test-utils 测试 传递属性能否正常显示', () => {
    const wrapper = mount(HelloWorld, {
      propsData: { msg: 'hello' },
    })
    expect(wrapper.get('h1').text()).to.be.eq('hello world')
  })
})
  • 结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
HelloWorld.vue
  √ 原生自己测试vue 传递属性能否正常显示

HelloWorld.vue
  1) 通过 @vue/test-utils 测试 传递属性能否正常显示


1 passing (82ms)
1 failing

1) HelloWorld.vue
     通过 @vue/test-utils 测试 传递属性能否正常显示:

    AssertionError: expected 'hello' to equal 'hello world'
    + expected - actual

    -hello
    +hello world