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']})
  })
});

第二次测试失败，因为似乎未设置道具。测试失败说：

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

基于ue-test-utils文档，我认为这将是一个简单的测试，因此我对为什么它完全失败感到困惑。

我不确定是否缺少一些预编译的片段或其他内容。我尝试使用mocha-webpack和最新的mochapack测试运行程序来运行这些测试，但是结果是相同的。

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

Answer 1

我正在用开玩笑的方式测试vue组件，但我不是这个主题的专家，但是我可以想象您还没有正确配置您的环境。

至少出于笑话，我不得不像这样配置一个转换对象。

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

重点是，此转换将* .vue文件更改为javascript。并在此步骤中创建了渲染功能。

也许这是丢失的，这就是为什么您得到该错误。但是我无法解释为什么第一次测试成功了。

希望这可以有所帮助。否则，我删除这篇文章。 ;）

测试Vue组件：无法挂载组件：模板或渲染函数未定义

1 个答案: