带有函数调用的 vue.js 单元测试 v-slot
Posted
技术标签:
【中文标题】带有函数调用的 vue.js 单元测试 v-slot【英文标题】:vue.js unit test v-slot with function call 【发布时间】:2020-08-29 08:33:51 【问题描述】:我将 bootstrap-vue 用于 vue.js css 框架,并决定测试所需的组件。该组件使用b-table,并有一个带调用功能的v-slot。
<template>
<b-table
striped
bordered
:items="items"
:fields="$t('pages.events.show.users.fields')"
>
<template v-slot:cell(name)=" item ">
<b-avatar :src="item.avatar" class="mr-2" />
<span v-text="item.name" />
</template>
</b-table>
</template>
我正在为这个组件编写一个简单的测试:
import shallowMount from "@vue/test-utils";
import EventUsersTable from "./EventUsersTable.vue";
/* #region Test setup */
const factory = () =>
return shallowMount(EventUsersTable,
mocks:
$t: jest.fn()
,
stubs:
BTable: true
);
;
/* #endregion */
describe("EventUsersTable.vue", () =>
let wrapper;
beforeEach(() => (wrapper = factory()));
test("should render component", () =>
expect(wrapper.html()).toMatchSnapshot();
);
);
我对此内容有误:[Vue warn]: Error in render: "TypeError: Cannot read property 'item' of undefined"
对于这个组件的写测试我需要解决这个问题。
我对 vue 单元测试文档有疑问,它们非常有限且示例很少。 如果有人知道有更多vue语言测试示例和场景的来源,谢谢介绍。
【问题讨论】:
【参考方案1】:经过询问,我想出了一个解决方案,使用mount并添加主要组件,能够解决我的问题。
import mount from "@vue/test-utils";
import BTable from "bootstrap-vue";
import EventUsersTable from "./EventUsersTable.vue";
/* #region Test setup */
const factory = () =>
return mount(EventUsersTable,
mocks:
$t: jest.fn()
,
stubs:
BTable
);
;
/* #endregion */
describe("EventUsersTable.vue", () =>
let wrapper;
beforeEach(() => (wrapper = factory()));
// FIXME: fix this bug for render component
test("should render component", () =>
expect(wrapper.html()).toMatchSnapshot();
);
);
【讨论】:
以上是关于带有函数调用的 vue.js 单元测试 v-slot的主要内容,如果未能解决你的问题,请参考以下文章
带有 vue-test-utils 和 Jest 的 Vue.js 单元测试用例失败