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

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

在Test5中就可以使用这个命名插槽：

<MessageList>
 <header slot="header">Awesome header</header>
 <Message v-for="message in messages" :key="message" :message="message"></Message>
</MessageList>

对MessageList组件进行测试时，首先测试组件中是否渲染了命名插槽的默认内容：

// 渲染命名插槽的默认内容
it('Header slot renders a default header text', () = > {
 const header = wrapper.find('.list-header');
 expect(header.text()).toBe('This is a default header')
});

然后测试插槽是否能插入我们给定的内容，只需要将mount方法中的slots选项的键值default改为被测试的插槽的name即可：

// 向header插槽中插入内容
it('Header slot is rendered withing .list-header', () = > {
 wrapper = mount(MessageList, {
  slots: {
   header: '<header>What an awesome header</header>'
  }
 });
 const header = wrapper.find('.list-header');
 expect(header.text()).toBe('What an awesome header')
})

测试debounce

我们经常使用lodash的debounce方法，来避免一些高频操作导致的函数在短时间内被反复执行，比如在Test6组件中，对button的点击事件进行了debounce，频率为500ms，这就意味着如果在500ms内如果用户再次点击按钮，handler方法会被推迟执行：

<template>
 <div class="outer">
  <p>This button has been clicked {{count}}</p>
  <button @click="addCounter">click</button>
 </div>
</template>

<script>
 import _ from 'lodash';
 export default {
  data() {
   return { count: 0 }
  },
  methods: {
   addCounter: _.debounce(function () {
    this.handler()
   }, 500),
   handler() {
    this.count += 1;
   }
  }
 }
</script>

在编写Test6的单元测试时，我们有一个这样的预期：当addCounter方法被触发时，500ms内没有任何后续操作，handler方法会被触发

如果没有进行特殊的处理，单元测试文件应该是这样的：

import { shallow } from 'vue-test-utils';
import Test6 from '@/components/Test6';

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

 beforeEach(() => {
  wrapper = shallow(Test6);
 });

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

 it('test for lodash', () => {
  const mockFn2 = jest.fn();
  wrapper.setMethods({ handler: mockFn2 });
  wrapper.vm.addCounter();
  expect(mockFn2).toHaveBeenCalledTimes(1);
 })
});

测试结果发现，addCounter被触发时handler方法并没有执行

因为lodash中debounce方法涉及到了setTimeout，`hanlder方法应该是在500ms后执行，所以在此时执行时方法没有执行。

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

相关推荐