vue.js 带有函数调用的单元测试 v-slot
vue.js unit test v-slot with function call
我将 bootstrap-vue 用于 vue.js css 框架,并决定测试所需的组件。这个组件使用了b-table,并且有一个带call函数的v槽。
<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语言测试的例子和场景的出处,谢谢介绍。
经过询问,我想到了一个解决方案,使用挂载并添加主要组件,能够解决我的问题。
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();
});
});
我将 bootstrap-vue 用于 vue.js css 框架,并决定测试所需的组件。这个组件使用了b-table,并且有一个带call函数的v槽。
<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语言测试的例子和场景的出处,谢谢介绍。
经过询问,我想到了一个解决方案,使用挂载并添加主要组件,能够解决我的问题。
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();
});
});