vuejs unit test throwing log message because of inner component

Question

I have a component like this

<template>
  <p>{{ msg }}</p>
  <inner-comp></inner-comp>
</template>
<script>
  import InnerComp from './components/InnerComp .vue';
  export default {
    props: ['msg'],
    components: {
        innerComp : InnerComp 
    }
  }
</script>

and the unit test

import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// helper function that mounts and returns the rendered text
function getRenderedText (Component, propsData) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData }).$mount()
  return vm.$el.textContent
}
describe('MyComponent', () => {
  it('renders correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')

  })
})

Test is passing, but it is throwing LOG ERROR like this

'[Vue warn]: Failed to mount component: template or render function not defined.
(found in <InnerComp>)'

Amit Sharma · Accepted Answer · 2017-06-10 12:20:05Z

1

Assuming you are using webpack, you should import component like

import Vue from 'vue'
import MyComponent from 'src/components/MyComponent.vue'

in your unit test file

answered Jun 10, 2017 at 12:20

Amit Sharma

2,4873 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs unit test throwing log message because of inner component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related