vue-test-utils - vue 测试工具获取 offsetWidth 为 0

Question

我试图获得 offsetwidth 的值但它总是 0 Template.spec.js

import { mount } from '@vue/test-utils';
import Template from '~/components/Template.vue';
describe('Template', () => {
  const wrapper = mount(Template);
  it('get offsetWidth', async () => {
    await wrapper.vm.$nextTick()
    console.log(wrapper.element.offsetWidth)  // 0
  });
});

模板.vue

<template>
  <div class="template" style="width:100px">
  </div>
</template>

Answer 1

看看你的CSS。如果 .template 的类包含以下任何规则，则您收到的结果是预期的。不会显示的元素可能不会包含在流程中。
your-stylesheet.css

display: none;
overflow: hidden;
float: left;
height: 0;   /* will be 0 without any content in the element */
position: absolute;

** 可能还有其他的，但其中任何一个都可能导致问题。在尝试测量它之前，只需确保有内容并显示它。
祝你好运!