ElementUI 表未在 Jest 测试中呈现答案

【问题标题】：ElementUI table not rendering in a Jest testElementUI 表未在 Jest 测试中呈现
【发布时间】：2021-07-19 16:57:53
【问题描述】：

我注意到我的一些使用 ElementUI 表的组件没有通过 Jest 和 Vue-test-utils 的测试。仔细研究一下，当我重现一个简单的示例并使用 console.log(wrapper.html) 时，表格的某些内部部分根本没有被渲染。

我绝不是前端专家（更多的是 Python 后端人员），并且致力于帮助另一个团队，所以我不是 100% 相信我没有做愚蠢的事情，但我已经探索一系列的可能性，我想不通。更重要的是，测试不工作，但组件本身在应用程序中工作得非常好——表格被正确呈现。所以这很令人沮丧，因为它似乎可以工作，但测试套件不同意......

这不是实际代码，但它是重现问题的精简示例。

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)，但它们似乎没有内部内容。

我最初考虑过但被视为问题的一些事情：

我确定我是 mounting 而不是 shallowMounting
使用LocalVue 和使用ElementUI 似乎确实有效，ElementUI 组件正在呈现为基本 html，并添加了相关类（例如 <table class="el-table">）
一些实际组件使用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 运行测试

【问题讨论】：

标签： vue-cli vue-test-utils element-ui

【解决方案1】：

我似乎找到了答案，所以如果其他人偶然发现这个问题，我会在此处发布。

解决方案似乎正在等待 nextTick() 以使 DOM 元素正确呈现。老实说，我不是 100% 确定这是为什么 - 如果测试期间数据发生变化，我可能会预料到这一点（并且我在更新道具时曾将该方法用于其他测试或触发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())
})

似乎解决了我的问题！

【讨论】：