原始的单元测试写法转换到Vue CLI 3集成的单元测试;
发现vue提供了一些方便的方法如mount()
挂载组件得到一个wrapper
包裹器。wrapper
包裹器提供一些方便的方法。相比之前省事多了,这里做记录,代码中有注释!
import { expect } from 'chai';
import { mount } from '@vue/test-utils';
import Button from '@/components/button/button.vue';
describe('Button.vue', () => {
// 现在挂载组件,你便得到了这个包裹器
// 包裹器的作用是Vue为其添加了方便的方法
// 也可以通过wrapper.vm获取实例进行原生操作
// 具体文档:https://vue-test-utils.vuejs.org/zh/api/wrapper/#%E5%B1%9E%E6%80%A7
const wrapper = mount(Button);
it('可以禁用button', () => {
const disabled = true;
wrapper.setProps({ disabled });
// 写法一
// 从包裹器wrapper解构得到实例vm
const { vm } = wrapper;
// 通过实例的方法getAttribute()获取对应的属性
// 通过实例的方法我们可以进行原生js的dom操作获取想要的属性
expect(vm.$el.getAttribute('disabled')).to.eq('disabled');
// 写法二
// Vue直接在包裹器wrapper上定义了一些方便的方法如:attributes()
// expect(wrapper.attributes('disabled')).to.eq('disabled');
});
it('正确添加icon', () => {
const icon = 'settings';
wrapper.setProps({ icon });
// 选中子组件
const useElement = wrapper.find('use');
expect(useElement.attributes('href')).to.eq(`#i-${icon}`);
});
});