详解Jest结合Vue-test-utils使用的初步实践(3)

日期：2020-05-11 栏目：程序人生浏览：次

也就是说，当我们测试App时，不需要也不应该关注其子组件的情况。这样才能保证单元测试的独立性。比如，在created钩子函数中进行的操作就会给测试带来不确定的问题。

为了解决这个问题，Vue-test-utils提供了shallow方法，它和mount一样，创建一个包含被挂载和渲染的Vue组件的Wrapper，不同的创建的是被存根的子组件。

这个方法可以保证你关心的组件在渲染时没有同时将其子组件渲染，避免了子组件可能带来的副作用（比如Http请求等）

所以，将App.spec.js中的mount方法更改为shallow方法，再次查看快照

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `
<div
 id="app"
>
 <!---->
</div>
`;

可以看出来，子组件没有被渲染，这时候针对App.vue的单元测试就从组件树中被完全隔离了。��

测试DOM结构

通过mount、shallow、find、findAll方法都可以返回一个包裹器对象，包裹器会暴露很多封装、遍历和查询其内部的Vue组件实例的便捷的方法。

其中，find和findAll方法都可以都接受一个选择器作为参数，find方法返回匹配选择器的DOM节点或Vue组件的Wrapper，findAll方法返回所有匹配选择器的DOM节点或Vue组件的Wrappers的WrapperArray。

一个选择器可以是一个CSS选择器、一个Vue组件或是一个查找选项对象。

CSS选择器：可以匹配任何有效的CSS选择器

标签选择器 (div、foo、bar)
类选择器 (.foo、.bar)
特性选择器 ([foo]、[foo="bar"])
id 选择器 (#foo、#bar)
伪选择器 (div:first-of-type)
符合选择器（div > #bar > .foo、div + .foo)

Vue组件：Vue 组件也是有效的选择器。

查找选项对象：

Name：可以根据一个组件的name选择元素。wrapper.find({ name: 'my-button' })
Ref：可以根据$ref选择元素。wrapper.find({ ref: 'myButton' })

这样我们就可以对DOM的结构进行验证：

describe('Test for Test1 Component', () => {
 let wrapper,
  vm;

 beforeEach(() => {
  // wrapper = mount(App);
  wrapper = shallow(Test1, {
   propsData: {
    messages: ['bye']
   }
  });
 });

 it('is a Test1 component', () => {
  // 使用Vue组件选择器
  expect(wrapper.is(Test1)).toBe(true);
  // 使用CSS选择器
  expect(wrapper.is('.outer')).toBe(true);
  // 使用CSS选择器
  expect(wrapper.contains('p')).toBe(true)
 });
});

还可以进行一步对DOM结构进行更细致的验证：

// exists()：断言 Wrapper 或 WrapperArray 是否存在。
it('不存在img', () = > {
 expect(wrapper.findAll('img').exists()).toBeFalsy()
});

// isEmpty()：断言 Wrapper 并不包含子节点。
it('MyButton组件不为空', () = > {
 expect(wrapper.find(MyButton).isEmpty()).toBeFalsy()
});

// attributes()：返回 Wrapper DOM 节点的特性对象
// classes()：返回 Wrapper DOM 节点的 class 组成的数组
it('MyButton组件有my-class类', () = > {
 expect(wrapper.find(MyButton).attributes().class).toContain('my-button');
 expect(wrapper.find(MyButton).classes()).toContain('my-button');
})

转载注明出处：http://www.heiqu.com/223.html

详解Jest结合Vue-test-utils使用的初步实践(3)

相关推荐