javascript - 如何测试 Vue 组件的高度或宽度？

Question

我打算用 Jest 测试 Vue 组件的元素大小。但是我得到的是控制台中的 0 。我尝试了几个属性，如 clientHeight、offsetHeight 等。为什么这个值是 0 即使元素已加载，我可以看到该元素的文本内容。

....
describe('Mount Cmp', () => {
     const localVue = createLocalVue()

     const wrapper = mount(mycomp, {
        localVue,    
     })

     const titleHeight = wrapper.vm.$el.querySelector('.title').offsetHeight

     console.log(titleHeight)
.....
})

Answer 1

Your test can only detect inline styles when running in jsdom. Reference.

考虑这个 HTML 模板: <li style="padding-top: 10px" class="message">{{ message }}</li> .你可以获得INLINED padding-top像这样:

it("Message component has style padding-top: 10", () => {
  expect(wrapper.find(".message").attributes().style).toBe("padding-top: 10px;");
});