无法读取未定义的属性'querySelector'-Vue测试工具

问题描述

我测试了Vuetify导航抽屉组件，因为我必须对其进行一些更改，并且遇到了非常奇怪的问题。另外，我补充说我使用TypeScript

list = data_df['category'].to_list()
data_df['category'].iloc[0] = list
data_df['count'] = data_df['count'].astype(str)
list = data_df['count'].to_list()
data_df['count'].iloc[0] = list

在我的测试代码中，任何建议出了什么问题我都接受所有建议

data_df['category'].iloc[0] = list

导航抽屉组件我增加了调整抽屉大小的可能性

TypeError: Cannot read property 'querySelector' of undefined

  28 | 
  29 |   private setBorderWidth(): void {
> 30 |     const border = this.drawer.$el.querySelector(
     | ^
  31 |       ".v-navigation-drawer__border"
  32 |     );
  33 | 

  at VueComponent.setBorderWidth (src/components/Navigation/NavigationDrawer.vue:30:1)
  at VueComponent.mounted (src/components/Navigation/NavigationDrawer.vue:90:1)
  at invokeWithErrorHandling (node_modules/vue/dist/vue.runtime.common.dev.js:1850:57)
  at callHook (node_modules/vue/dist/vue.runtime.common.dev.js:4207:7)
  at Object.insert (node_modules/vue/dist/vue.runtime.common.dev.js:3133:7)
  at invokeInsertHook (node_modules/vue/dist/vue.runtime.common.dev.js:6326:28)
  at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6543:5)
  at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
  at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
  at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
  at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
  at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
  at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
  at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:13855:21)
  at shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.js:13881:10)
  at Object.<anonymous> (tests/unit/components/Navigation/NavigationDrawer.spec.ts:20:21)

解决方法

将shallowMount替换为mount，应该没问题。

请记住，需要安装vuetify组件才能访问它们。

编辑：

似乎您的v-model指令值无效。 我想应该是navigation.show而不是navigation.visible

编辑2： 尝试致电 localVue.use(Vuetify)之后的const localVue = createLocalVue()

这可能会导致检测到多个Vue实例。然后我建议这样做：

...
import Vue from 'vue'
import Vuetify from 'vuetify'
... 

Vue.use(Vuetify);

...

const wrapper = mount(NavigationDrawer,{
  vuetify,propsData: props,});

编辑3（添加了我的代码）：

import { createLocalVue,mount } from "@vue/test-utils";

import Vuetify from "vuetify";
import NavigationDrawer from "@/components/NavigationDrawer.vue";

const localVue = createLocalVue()
localVue.use(Vuetify)

describe("NavigationDrawer.vue",() => {
  let vuetify: any;

  beforeEach(() => {
    vuetify = new Vuetify();
  });

  test("Render props correctly when passed",() => {
    const props = {
      width: 300,visible: true
    };

    const wrapper = mount(NavigationDrawer,{
      localVue,vuetify,});

    expect(wrapper.props()).toStrictEqual(props);
    expect(wrapper.vm.$data.navigation.show).toBeTruthy();
  });
});

import { createLocalVue,mount } from "@vue/test-utils";
import Vue from 'vue'
import Vuetify from "vuetify";
import NavigationDrawer from "@/components/NavigationDrawer.vue";

Vue.use(Vuetify)

describe("NavigationDrawer.vue",{
      vuetify,});

    expect(wrapper.props()).toStrictEqual(props);
    expect(wrapper.vm.$data.navigation.show).toBeTruthy();
  });
});