vue.js - 测试 Vue 组件 : Failed to mount component: template or render function not defined

Question

我正在使用 Mocha 为 Vue 组件编写测试，但我似乎无法解决此警告:

[Vue warn]: Failed to mount component: template or render function not defined.

经过一些研究，似乎出现此警告的大多数其他实例都涉及使用 vue-router。但是，我没有使用该库。

我什至在像下面这样的非常基本的组件中也看到了警告。它大致遵循以下示例:Testing Single-File Components with Mocha + webpack .

<template>
  <div>
    <ul>
      <li v-for="item in items">
        {{ item }}
      </li>
    </ul>

  </div>
</template>

<script>

  export default {
    props: {
      items: Array,
      required: true,
    },
    data () {
      return {}
    },
  }
<script>

<style>
</style>

在浏览器中一切正常，但测试显示出一些不正常的行为。这里有两个测试，都是非常基础的。第一个通过，第二个失败。这两个测试都会触发有关未定义模板或渲染函数的警告。

import { mount } from '@vue/test-utils';
import Foo from '../../foo.vue';

describe('Foo', () => {
  it('works', () => {
    const wrapper = mount(Foo, {
      propsData: {
        items: ['a','b','c']
      }
    });
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('contains a property', () => {
    const wrapper = mount(Foo, {
      propsData: {
        items: ['a','b','c']
      }
    });
    expect(wrapper.props()).toEqual({items: ['a','b','c']})
  })
});

第二个测试失败，因为似乎没有设置 Prop 。测试失败说:

Expected: ["a", "b", "c"]
Received: {}

基于ue-test-utils文档，我认为这将是一个简单的测试，所以我很困惑为什么它会失败。

我不确定是否缺少某些预编译片段或其他内容。我已经尝试使用 mocha-webpack 和更新的 mochapack 测试运行器运行这些测试，但结果是一样的。

关于如何删除该警告并让这些测试通过的任何建议？

Answer 1

我正在用 jest 测试我的 vue 组件，我不是这个主题的专家，但我可以想象你没有正确配置你的环境。

至少为了开玩笑，我不得不像这样配置一个转换对象。

"transform": {
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },

重点是，这种转换将 *.vue 文件更改为 javascript。并在此步骤中创建渲染函数。

也许这是缺失的，这就是你得到那个错误的原因。但我无法解释为什么第一次测试成功。

希望这对您有所帮助。否则我删除这个帖子。;)