Vuejs 在vuejs中使用mochachai进行单元测试

参考:  https://vuejs.org/v2/guide/unit-testing.html

入门: https://vue-test-utils.vuejs.org/api/wrapper/#name

这个是我问的问题:  https://stackoverflow.com/questions/58677875/vue-only-export-methods-to-jest-when-i-ran-unit-test-how-to-export-data-and/58678603#58678603

这里是demo: https://github.com/sg552/vue2-unit-test-demo

记住几个要点：　

1. 在webpack版本中的vue, 要使用 vue create 建立模板的方式,似乎安全一些. (未尝试)

2. 运行命令:

$ npm run test:unit   # 运行所有.

$ npm run test:unit  tests/unit/1.spec.js   # 只运行这一个文件.

3. 运行的时候, 要务必使用wrapper , 例如:

import { shallowMount } from "@vue/test-utils"
import Sum from '@/views/Sum.vue'

describe('Sum.vue', () => {
  it('should run sum', () => {

    // 这个是错误的, 不要使用未经过挂载的Vue component, 务必要经过 shallowMount()
    //expect(Sum.methods.sum()).toBe(3)   

    // 这个是正确的
    let wrapper = shallowMount(Sum)
    expect(wrapper.vm.sum()).to.equal(3)
  })  
})

在上面的代码中, wapper.vm 返回的对象,是一个很有趣的东西,可以直接访问vue 实例中的methods, data. 例如: 

wrapper.vm.a,   # =>  this.a 

wrapper.vm.b   # =>  this.b

wrapper.vm.sum()   # => this.sum()   

4. toBe是 jest的语法, to.equal() 是chai的语法.