2

我正在使用 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但结果是相同的。

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

4

1 回答 1

1

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

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

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

关键是，这种转换将 *.vue 文件更改为 javascript。在这一步中，渲染函数被创建。

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

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

于 2019-05-09T12:53:37.440 回答