Jest测试中没有呈现的ElementUI表

Question

我注意到使用ElementUI表的一些组件正在测试失败，使用Jest和Vue-test-utils。再看一看，当我重现一个简单的示例并使用console.log(wrapper.html)时，表的一些内部部分根本就没有呈现出来。

我绝不是一个前端专家(更多的是一个Python后端的人)，并致力于帮助另一个团队，所以我并不是百分之百地相信我没有做一些愚蠢的事情，但我已经探索了一系列的可能性，我无法弄清楚。更重要的是，测试不起作用，但是组件本身在应用程序中工作得非常好--表被正确地呈现。所以这很令人沮丧，因为它看起来很有效，但是测试套件不同意.

这不是实际的代码，但它是一个精简的例子来重现问题。

BasicTable.vue

<template>
  <div>
    <el-table
      :data="tdata"
    >
      <el-table-column #default="{ row }">
        {{ row.item }}
      </el-table-column>
      <el-table-column #default="{ row }">
        {{ row.size }}
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'BasicTable',
  data () {
    return {
      tdata: [{ item: 'A', size: 'L' },
        { item: 'B', size: 'M' },
        { item: 'C', size: 'XS' },
        { item: 'D', size: 'XXL' },
      ],
    }
  },

}
</script>

BasicTable.spec.js

import BasicTable from './BasicTable.vue'
import ElementUI from 'element-ui'
import { mount, createLocalVue } from '@vue/test-utils'


test('Render for basic table', () => {
  const localVue = createLocalVue()
  localVue.use(ElementUI)

  const wrapper = mount(BasicTable, {
     localVue
  }
  console.log(wrapper.html())
})

因此，我希望wrapper.html()的输出只呈现表，包括四行和两列，就像数据中所期望的那样。

然而，我真正得到的是

 <div>
      <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition">
        <div class="hidden-columns">
          <div></div>
          <div></div>
        </div>
        <div class="el-table__header-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__header">
            <colgroup></colgroup>
            <thead class="">
              <tr class=""></tr>
            </thead>
          </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-none">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
            <colgroup></colgroup>
            <tbody>
              <tr class="el-table__row"></tr>
              <tr class="el-table__row"></tr>
              <tr class="el-table__row"></tr>
              <tr class="el-table__row"></tr>
              <!---->
            </tbody>
          </table>
          <!---->
          <!---->
        </div>
        <!---->
        <!---->
        <!---->
        <!---->
        <div class="el-table__column-resize-proxy" style="display: none;"></div>
      </div>
    </div>

因此，在<tbody></tbody>标记之间，存在正确的行数(4)，但它们似乎没有内部内容。

有几件事我最初考虑过，但被打折扣作为问题：

shallowMounting

• using

• I确保我是安装，而不是 LocalVue，并且使用ElementUI看起来确实有效，ElementUI组件被呈现为基本的html，并添加了相关的类(例如，实际组件的<table class="el-table">)

• Some使用computed()来计算表中的数据，或者让它通过道具传递。我认为这可能导致了一些问题，但我用我所能想到的最简单的情况(即组件中的硬编码数据)设置了这个基本示例，并且仍然看到了相同的结果。

我很难找到很多特定的ElementUI/Jest/Vue-test-utils在线帮助，所以任何建议都会非常感谢！如果我做了什么蠢事，请告诉我，因为正如我所说的，这不是我的主要专业领域。

我正在使用的东西的版本(来自package.json)

 "dependencies": {
    "element-ui": "^2.4.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "core-js": "^3.6.5",
    "@vue/cli-service": "~4.5.0"
  },

注意:这个项目是用Vue-cli安装的，我相信Jest是与此捆绑的。

"@vue/cli-plugin-unit-jest": "~4.5.0",

我用npm run test:unit运行测试

Answer 1

我似乎找到了答案，所以如果其他人发现了这个问题，我会把它发到这里。

该解决方案似乎在等待nextTick()，以使DOM元素正确地呈现。老实说，我不能百分之百确定这是为什么--如果数据在测试期间发生了变化，我可能会想到这一点(例如，我在更新道具或触发click时使用了这种方法)，但是在这种情况下，数据是在安装时传入的.如果你遇到这个答案，并有一个更具体的解释，请随意添加在这里！

所以为了完整起见，就像

test('Render for basic table', async () => {
  const localVue = createLocalVue()
  localVue.use(ElementUI)

  const wrapper = mount(BasicTable, {
     localVue
  }
  await wrapper.vm.$nextTick()    <-- added this line (also made the test async)
  console.log(wrapper.html())
})

似乎解决了我的问题！