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

<div
id="app"
>
<div>
<p>
Cat
</p>
</div>
</div>
`;

 

通过快照我们可以发现，子组件Test1被渲染到App中了。

这里面有一个问题：单元测试应该以独立的单位进行。也就是说，当我们测试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);								 
 3/15   首页 上一页 1 2 3 4 5 6 下一页 尾页