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) 编辑 收藏 举报