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

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

具体到例子中来看，我们要测试的是：Message组件是否出现在具有list-messages的类的ul中。在测试时，为了将slots传递给MessageList组件，我们在MessageList.spec.js中的mount或者shallow方法中使用slots属性

import { mount } from 'vue-test-utils';
import MessageList from '@/components/Test4/MessageList';

describe('Test for MessageList of Test4 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = mount(MessageList, {
   slots: {
    default: '<div class="fake-msg"></div>'
   }
  });
 });

 afterEach(() => {
  wrapper.destroy()
 });

 // 组件中应该通过slots插入了div.fake-msg
 it('Messages are inserted in a ul.list-messages element', () => {
  const list = wrapper.find('ul.list-messages');
  expect(list.contains('div.fake-msg')).toBeTruthy()
 })
});

为了测试内容是否通过插槽插入了组件，所以我们伪造了一个div.fake-msg通过slots选项传入MessageList组件，断言组件中应该存在这个div

不仅如此，slots选项还可以传入组件或者数组：

import AnyComponent from 'anycomponent'

mount(MessageList, {
 slots: {
  default: AnyComponent // or [AnyComponent, AnyComponent]
 }
})

这里面有一个问题，例如我们想测试Message组件是否通过插槽插入了MessageList组件中，我们可以将slots选项中传入Message组件，但是由于Message组件需要传入message作为Props，所以按照上面的说明，我们应该这样做：

beforeEach(() = > {
 const fakeMessage = mount(Message, {
  propsData: {
   message: 'test'
  }
 });
 wrapper = mount(MessageList, {
  slots: {
   default: fakeMessage
  }
 })
});

对应的断言是：

// 组件中应该通过slots插入了Message，并且传入的文本是test
it('Messages are inserted in a ul.list-messages element', () = > {
 const list = wrapper.find('ul.list-messages');
 expect(list.contains('li')).toBeTruthy();
 expect(list.find('li').text()).toBe('test')
})

但是这会失败，查了资料，貌似不能通过这种方式mounted的组件传入slots中。

虽然如此，我们可以而通过渲染函数（render function）来作为一种非正式的解决方法：

const fakeMessage = {
 render(h) {
  return h(Message, {
   props: {
    message: 'test'
   }
  })
 }
};
wrapper = mount(MessageList, {
 slots: {
  default: fakeMessage
 }
})

测试命名插槽（Named Slots）

测试命名插槽和默认插槽原理相同，创建Test5组件，里面应用新的MessageList组件，组件中增加一个给定名字为header的插槽，并设定默认内容：

<div>
 <header class="list-header">
  <slot name="header">This is a default header</slot>
 </header>
 <ul class="list-messages">
  <slot></slot>
 </ul>
</div>

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

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

相关推荐