在渲染中测试带有 Jest 错误的组件：“TypeError：无法读取 null 的属性‘模板’”

Question

我的代码库中有这个组件，

    <template>
    <v-dialog v-model="modalVisible" content-class="muc-modal" max-width="350" persistent>
        <v-card>
            <component :is="component"/>
        </v-card>

    </v-dialog>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class";

const Modal = namespace("Modals");

@Component
export default class AppModal extends Vue {

    public component: any = null;

    @Modal.State
    public modalVisible!: boolean;
    @Modal.State
    public modalComponent!: string;
    @Modal.State
    public modalComponentPath!: string|null;


    get injectedComponent() {
        return this.modalComponent;
    }

    @Modal.Mutation
    public hideModal!: () => void

    @Watch('injectedComponent')
    onModalComponent(componentName: string) {
        if(!componentName) return;
        this.component = Vue.component(componentName, () => import(`./${this.modalComponentPath}`));
    }


}
</script>

<style scoped lang="scss">

.muc-modal {
    width:350px;
    max-width:90%;
}

</style>

模态组件接受另一个组件，这是通过模态存储上的突变运行的，

 import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators";

@Module({ namespaced: true })
export default class Modals extends VuexModule {

    //#region "State"
    public modalVisible: boolean = false;
    public modalComponent: string|null = null;
    public modalComponentPath: string|null = null;
    //#endregion "State"

    //#region "Mutations"
    @Mutation
    public showModal(modalComponent:string, modalComponentPath: string|null = null) {
        this.modalVisible = true;
        this.modalComponent = modalComponent
        this.modalComponentPath = modalComponentPath ? modalComponentPath : modalComponent
    }

    @Mutation
    public hideModal() {
        this.modalVisible = false;
        this.modalComponent = null;
        this.modalComponentPath = null;
    }
    //#endregion "Mutations"

    //#region "Getters"
    get getVisibility(): boolean {
        return this.modalVisible
    }
    //#endregion "Getters"

    //#region "Actions"
    //#endregion "Actions"


}

我想编写一些测试，a) 在运行 showModal() 突变时正确测试模态显示，b) 在运行 hideModal() 突变时正确隐藏模式显示。

这是我当前的测试文件，

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import Modals from '@/store/modal';
import AppModal from '@/components/AppModal.vue';

const localVue = createLocalVue();

localVue.use(Vuex);

describe('AppModal.vue', () => {

    let store: any = null;
    //let mutations = modals.mutations

    beforeEach(() => {

        store = new Vuex.Store({
            modules: {
                "modals" : Modals
            }
        })
    
    });

    it('shows modal when modalVisible is set to true', () => {
        console.log(store);
        const wrapper =  shallowMount(AppModal, {store, localVue});
        // const modal = wrapper.find('.muc-modal')
        // console.log(modal);

    })

});

运行此测试我得到以下响应，

console.error node_modules/vuex/dist/vuex.common.js:916 [vuex] 在 mapState() 中找不到模块命名空间：Modal/

console.error node_modules/vuex/dist/vuex.common.js:916 [vuex] 在 mapState() 中找不到模块命名空间：Modal/

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue 警告]：渲染错误：“TypeError：无法读取 null 的属性‘模板’”

found in

---> <AppModal>

我不知道为什么，有人可以帮我解释一下吗？

Answer 1

这个错误 -

TypeError: 无法读取 null 的属性“模板”

是这个编码错误的直接结果-

<component :is="null" />

为什么？

组件标签的is 属性不应为空值，即使它是暂时的。 null 不是一个有效的组件，即使您在浏览器中看不到它，Jest 也能正确发现此错误。

在上面的代码中，属性component（可能是一个错误的变量名）的初始值是null，这就是它的来源。一个简单的解决方法是将有效组件设置为初始值，使其永远不会为空。