Vue测试通过,但显示此警告:UnhandledPromiseRejectionWarning:TypeError:无法读取未定义的属性“ getter”

问题描述

我正在测试一个组件中是否存在3个子组件。测试通过,但显示此警告:

(node:52604) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'getters' of undefined
(node:52604) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection,use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:52604) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future,promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这是测试的代码

  const localVue = createLocalVue();
  localVue.use(TPlugin(url)); //EDIT: ADD PLUGIN
  localVue.use(Vuex);

  it('WIP Fixing. Check the 3 Sub-Components of Chatwindow',() => {
    const onClose = jest.fn();
    const onMinimize = jest.fn();

    const store = new Vuex.Store({
      state: {
        title: "My Web Chat",titleIconUrl: "",visibility: "minimized",showCloseButton: false

      },getters: {
        title: (state) => state.title,lastName: (state) => state.lastName,state: (state) => state.visibility
      }
    })

    const wrapper = shallowMount(Chatwindow,{
      propsData: {
        onClose,onMinimize
      },store,localVue
    })

    expect(wrapper.findComponent(Header).exists()).toBe(true)
    expect(wrapper.findComponent(MessageList).exists()).toBe(true)
    expect(wrapper.findComponent(UserInput).exists()).toBe(true)
  });

我在Vuex上安装组件的方式肯定有一些错误吗?

更新,这是我的index.js的摘录:

export const store = new Vuex.Store({
    state: {
       title: "My funky title",url: DEFAULT_URL,//more variables....
    },mutations: {
       title(state,newTitle) {
            state.title = newTitle
        },url(state,newUrl) {
            state.url = newUrl
        },visibility(state,visibility) {
            state.visibility = visibility
        },//more variables...
    }
    getters: {
       title: state => state.title,url: state => state.url,visibility: visibility => state.visibility,//more variables.....
       state: state => {
            return { 'visibility': state.visibility }
        },}
})


window['TWChat'] = {
  initialize(element,twcProps) {
    Vue.prototype.$store = store;

    if (twcProps.title) {
      store.commit('title',twcProps.title);
    }

    ///more similar if/commit blocks...
    // check required properties
    if (!store.getters.url) {
      // Todo: thow error if url is missing?
      return
    }

    Vue.use(TPlugin(store.getters.title));
    Vue.prototype.$extensionMethods = functionMap;

    //TChat is the parent of Chatwindow,the componentent of the Test 
    above.
    new Vue({
      render: (h) => h(TChat,{ props: { } }),}).$mount(element);
  }
}

index.ejs代码

<div id="t-chat"></div>
<script src="t-chat.js"></script> -->
    <script>
      window.onload = function () {
 
        var element = document.getElementById('t-chat');
        const someProps = {
          'url': '<%= process.env.ENDPOINT_URL %>','title':'<%= process.env.HEADER_TITLE %>'
        }

        window.TChat.initialize(element,someProps);
      }
     </script>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)