Testing Vue Component: Failed to mount component: template or render function not defined

Question

I'm writing a test for a Vue component using Mocha and I can't seem to resolve this warning:

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

After a bit of research, it seems like most other instances of this warning appearing involve using vue-router. However, I'm not using that library.

I am seeing the warning in even a very basic component like the one below. It roughly follows this example: 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>

Everything works fine in the browser, but the tests demonstrate some unusual behavior. Here are two tests, both are very basic. The first passes and the second fails. Both tests trigger the warning about the template or render function not being defined.

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

The second test fails because it seems like the props have not been set. The test failure says:

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

Based on the ue-test-utils documentation, I figured this would be a straightforward test, so I'm confused about why it's failing at all.

I'm not sure if there's some pre-compilation piece that I'm missing or something else. I've tried running these tests with both mocha-webpack and the more up-to-date mochapack test runner but the result is the same.

Any advice on how to remove that warning and get these tests to pass?

Answer 1

I am testing my vue components with jest and i am no expert in this topic but i could imagine that you havent configured your enviroment properly.

At least for jest i had to configure a transform Object like this.

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

The point is, that this transformation changes a *.vue file into javascript. And in this step the render function is created.

Perhaps this is missing and thats why you get that error. But i can't explain why the first test succeeded.

Hopefully this could help. Otherwise i delete this post. ;)