jest 事件测试
2024-10-07 07:40:34
概述
最近玩 Jest，测试 Vue 组件上的事件，有一些心得，记录下来供以后开发时参考，相信对其他人也有用。
事件测试
对于 Vue 组件上的事件，分为 2 种，一种是子组件 Emit 的事件，另一种是插件的事件回调。
子组件 emit 的事件
对于子组件 Emit 的事件，我们使用 Jest mock 这个子组件，然后使用 Vue-Test-Util 提供的方法，模拟 emit 事件即可，示例如下：
// ChildComponent
export default {
name: 'ChildComponent',
};
// ParentComponent
<template>
<div>
<child-component @custom="onCustom" />
<p v-if="emitted">Emitted!</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
name: 'ParentComponent',
components: { ChildComponent },
data() {
return {
emitted: false,
};
},
methods: {
onCustom() {
this.emitted = true;
},
},
};
</script>
// test.js
import { shallowMount } from '@vue/test-utils';
import ChildComponent from './helper/ChildComponent';
import ParentComponent from './helper/ParentComponent.vue';
describe('emit custom event', () => {
beforeEach(() => {
jest.resetAllMocks();
});
it("displays 'Emitted!' when custom event is emitted", () => {
const wrapper = shallowMount(ParentComponent);
wrapper.find(ChildComponent).vm.$emit('custom');
expect(wrapper.vm.emitted).toBeTruthy();
expect(wrapper.html()).toContain('Emitted!');
});
});
插件的事件回调
有些插件会提供事件回调，比如 sortable.js 就提供这样的事件回调：
var sortable = new Sortable(el, {
group: "name",
sort: true,
onSort: function (/**Event*/evt) {
// 事件回调
},
});
这个时候我们只需要用 Jest mock 这个插件，然后直接手动执行这个事件绑定的回调函数即可。因为 Jest 代理了这个插件，所以实际上这个插件并没有真正被引入，所以所有这个插件执行的操作都需要我们手动调用或者模拟执行。实例如下：
// module.js
function ChildModule(options) {}
export default ChildModule;
// ParentComponent
<template>
<div>
<child-component @custom="onCustom" />
<p v-if="called">Called!</p>
</div>
</template>
<script>
import ChildModule from './ChildModule';
export default {
name: 'ParentComponent',
data() {
return {
called: false,
};
},
created() {
this.childModule = new ChildModule({
callback: () => {
this.called = true;
},
});
},
};
</script>
// test.js
import { shallowMount } from '@vue/test-utils';
import ChildModule from './helper/ChildModule';
import ParentComponent from './helper/ParentComponent.vue';
jest.mock('./helper/ChildModule');
describe('emit custom event', () => {
beforeEach(() => {
jest.resetAllMocks();
});
it("displays 'Called!' when callback is called", async () => {
const wrapper = shallowMount(ParentComponent);
ChildModule.mock.calls[0][0].callback();
expect(wrapper.vm.called).toBeTruthy;
expect(wrapper.html()).toContain('Called!');
});
});
需要说明的是：我们是通过这段代码执行回调函数的：
ChildModule.mock.calls[0][0].callback();
最新文章
- DDD 领域驱动设计－看我如何应对业务需求变化，愚蠢的应对？
- 【Win10开发】Toast通知
- java如何区分是form表单请求，还是ajax请求
- python python 入门学习之网页数据爬虫cnbeta文章保存
- （转）yii流程,入口文件下的准备工作
- RH LINUX5.5 RAW绑定
- AC日记——舒适的路线 codevs 1001 （并查集+乱搞）
- Cognos请求流程——<转>
- window.dialogArguments的使用
- iOS 7 新特性
- Android中的selector
- 如何在container中编译dotnet的eShopOnContainers
- SuperSocket基础一
- 剑指Offer——全排列递归思路
- Python高级教程
- erlang开发工具之intellij idea基本使用
- c#简单的io
- __stdcall __cdecl 引起的程序崩溃
- 【python】class之类属性
- SIT与UAT的分别