Vue组件网页正常渲染但单测中Tab组件存在性断言失败如何解决

页面端组件可正常渲染，Title、Top组件断言均通过，仅Tab组件存在性断言失败，可按以下步骤排查解决：

• 校验组件name匹配性：find({name: xxx})要求大小写完全匹配组件内部定义的name属性，检查Tab组件的name是否恰好为Tab，如果组件定义时name为tab、TabPanel等不匹配值，就会查找失败，Title、Top组件可正常匹配说明二者name与断言值一致
• 排查Tab组件的条件渲染逻辑：若Tab组件绑定了v-if、v-show指令，依赖store状态、路由参数、props值等外部变量，页面运行时这些变量值满足渲染条件，单测初始化时未给对应变量赋值就会导致Tab不渲染。可在断言前打印console.log(wrapper.html())查看单测环境下实际渲染的DOM结构，确认Tab是否存在
• 检查组件注册有效性：如果Tab为全局注册组件，要确认单测使用的localVue实例已完成Tab的全局注册；如果为局部注册组件，要确认TransactionList组件的script部分已正确引入并注册Tab组件
• 替换选择器：如果是第三方组件库的Tab组件，官方定义的name可能和预期不符，可改用class、id等选择器查找，示例如下：

// 给Tab组件加自定义class
<Tab class="transaction-tab" />

// 单测中用class选择器查找
expect(wrapper.find('.transaction-tab').exists()).toBe(true);

常见场景修复示例 #

如果是Tab依赖store状态未初始化导致的问题，可在挂载组件前提前设置对应状态：

describe("Transaction", () => {
    let wrapper;
    let status = false;
    beforeEach(() => {
        // 提前赋值Tab渲染所需的状态
        store.state.transaction.showTab = true
        wrapper = mount(TransactionList, {
            localVue,
            vuetify,
            i18n,
            store,
            router
        });
    });
    
    it("Title, Top and Tab components should render", () => {
        expect(wrapper.find({ name: "Title" }).exists()).toBe(true);
        expect(wrapper.find({ name: "Top" }).exists()).toBe(true);
        expect(wrapper.find({ name: "Tab" }).exists()).toBe(true);
    });
})

内容的提问来源于stack exchange，提问作者Manni Ojha