yangxuanLL

vue单元测试（jest）

一、环境配置

1、安装依赖

vue add @vue/cli-plugin-unit-jest

确保已经安装了vue-cli3或vue-cli4，可以通过vue --version测试

安装完成，时间略微长一点，5-10分钟

安装完成后package.json里会增加这些依赖

 文件根目录多出一个jest.config.js文件以及tests/unit/example.spec.js

 依赖安装完成后需要npm install

2、修改测试案例

修改tests文件夹下的unit文件夹下的example.spec.js中的代码

 1 import { mount } from '@vue/test-utils'
 2 import HelloWorld from '@/testComponents/HelloWorld.vue'
 3 
 4 describe('HelloWorld.vue', () => {
 5   const wrapper = mount(HelloWorld);
 6   const vm = wrapper.vm;
 7   it('渲染', () => {
 8     expect(wrapper.html()).toContain('<span>0</span>')
 9   })
10   it('计数器在点击按钮时自增', () => {
11     // 点击之前
12     console.log('计数器点击之前的值：' + vm.count);
13     // 调用实例中的increment方法，点击计数器
14     vm.increment();
15     // 点击之后
16     console.log('计数器点击之后的值：' + vm.count);
17     // 判断最后的count是否为最后对应的值
18     expect(vm.count).toBe(1);
19   })
20 })
修改HelloWorld.vue中的代码
 1 <template>
 2   <div>
 3     <span>{{ count }}</span>
 4     <button @click="increment">自增</button>
 5   </div>
 6 </template>
 7 <script>
 8 export default {
 9   data () {
10     return {
11       count: 0
12     }
13   },
14   methods: {
15     increment () {
16       this.count++
17     }
18   }
19 }
20 </script>

3、运行

npm run test:unit

运行结果

 单独运行一个测试用例：

npm run test:unit <name>

例如：npm run test:unit example

posted on 2020-10-10 17:10  yangxuanLL  阅读(921)  评论(0)  编辑  收藏  举报

导航