Get dom width Code error report in vue-cli 3.0 Integrated jest Unit Test component

vue uses a jest unit test, and the width clientWidth of a dom element is used in the component, but this element is not available through window.querySelect when running the unit test, not even in nextTick.

clipboard.png

< H2 > xxx.vue Code < / H2 >
...
methods {
    resize () {
      let width = document.querySelector("-sharpm-editor").clientWidth;
      let editTools = document.querySelector(".edit-tools");
      if (width > 780) {
        editTools.style.width = "600px";
      } else if (680 < width) {
        editTools.style.width = "480px";
      } else if (640 < width) {
        editTools.style.width = "400px";
      } else if (500 < width) {
        editTools.style.width = "320px";
      } else if (width < 500) {
        editTools.style.width = "0";
      }
    },
    ...
   }
< H2 > Test Code < / H2 >
import { shallowMount } from "@vue/test-utils"
// import HelloWorld from "@/components/HelloWorld.vue"

// describe("HelloWorld.vue", () => {
//   it("renders props.msg when passed", () => {
//     const msg = "new message"
//     const wrapper = shallowMount(HelloWorld, {
//       propsData: { msg }
//     })
//     expect(wrapper.text()).toMatch(msg)
//   })
// })
import markdownEditor from "@/components/markdownEditor.vue"

describe("markdownEditor.vue", () => {
  it("renders props.input when passed", () => {
    const msg = "-sharp hello world"
    const wrapper = shallowMount(markdownEditor, {
      propsData: { value: msg }
    })
    wrapper.vm.$nextTick(() => {
      expect(wrapper.html()).toMatch("<h1>hello world</h1>")
    })
  })
})
Jul.13,2022
Menu