ElementUI 表未在 Jest 测试中呈现

编程问答 2022-05-10

问题描述

我注意到我的一些使用 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)，但它们似乎没有内部内容。

我最初考虑但认为是问题的一些事情：

  • 我确定我是安装而不是浅安装
  • 使用 LocalVue 和使用 ElementUI 似乎确实有效，ElementUI 组件被呈现为基本 html，并添加了相关类（例如 <table class="el-table">）
  • 一些实际组件使用 computed() 来计算进入表中的数据，或者通过 prop 传递数据。我认为这可能会导致一些问题，但我使用我能想到的最简单的情况（即组件中的硬编码数据）设置了这个基本示例，但我仍然看到相同的结果。

我一直在努力在网上找到很多具体的 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

运行测试

解决方法

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

解决方案似乎在等待 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())
})

似乎解决了我的问题！

vue-clivue-test-utils