时间戳

首页 > 解决方案 > ElementUI 表未在 Jest 测试中呈现

vue-cli - ElementUI 表未在 Jest 测试中呈现

问题描述

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

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

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

解决方案

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

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

似乎解决了我的问题！

推荐阅读