带有函数调用的 vue.js 单元测试 v-slot答案

【问题标题】：vue.js unit test v-slot with function call带有函数调用的 vue.js 单元测试 v-slot
【发布时间】：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语言测试示例和场景的来源，谢谢介绍。

【问题讨论】：

标签： unit-testing vue.js jestjs vue-test-utils bootstrap-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();
    });
});

【讨论】：