<slot name="header">This is a default header</slot>
</header>
<ul class="list-messages">
<slot></slot>
</ul>
</div>
在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()
});
