Javascript 正在测试呈现中出现Jest错误的组件："；TypeError:无法读取属性'；模板&x27；“无效”的定义；_Javascript_Vue.js_Jestjs_Tdd

Javascript 正在测试呈现中出现Jest错误的组件："；TypeError:无法读取属性'；模板&x27；“无效”的定义；

javascript vue.js jestjs

Javascript 正在测试呈现中出现Jest错误的组件："；TypeError:无法读取属性'；模板&x27；“无效”的定义；,javascript,vue.js,jestjs,tdd,Javascript,Vue.js,Jestjs,Tdd,我的代码库中有这个组件 <template> <v-dialog v-model="modalVisible" content-class="muc-modal" max-width="350" persistent> <v-card> <component :is="component"/> &l

我的代码库中有这个组件

    <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>

我想写一些测试，a）在运行

showmodel（）

变异时正确地测试模态显示，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节点_modules/vuex/dist/vuex.common.js:916 在mapState（）中找不到[vuex]模块命名空间：Modals/

console.error节点_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn]：呈现中出错：“TypeError:无法读取null的属性“template”

在中找到
--->

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

这个错误-

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

found in

---> <AppModal>

是此编码错误的直接结果-

<component :is="null" />

为什么？

组件标记的

is

属性不应为空值，即使它是瞬时的

null

不是有效的组件，即使您在浏览器中看不到，Jest也能正确地找到此错误

在上面的代码中，属性

组件

（可能是一个错误的变量名）的初始值是

null

，这就是它的来源。一个简单的修复方法是将有效组件设置为初始值，这样它就永远不会为null。

此错误-