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.
< 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>")
})
})
})