Regression: Injected components seemingly fail to mount in tests

[riovir]

Version

13.0.0

Reproduction link

https://github.com/riovir/injected-component-reprod

Steps to reproduce

Clone - install - test with the given repo, or:

• npm i -g vue-cli
• vue init webpack
  • make sure to pick unit tests
• npm i
• npm i -D vue-loader@13.0.0
• open test/specs/Hello.spec.js and add these two snippets

  it('should render correct contents even when injecting', () => {
    const HelloInjector = require('!!vue-loader?inject!@/components/Hello')
    const Constructor = Vue.extend(HelloInjector({}))
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })

• run the test to see they pass
• make a copy of Hello.vue (eg. Hello0.vue)
• rerunning the tests should trigger the error:

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

• npm i -D vue-loader@12.2.1
• rerunning "fixes the tests"

What is expected?

Mock-injected components to behave the same way as their regularly loaded counterparts. Particularly where the render function is concerned.

What is actually happening?

In arbitrary situations (project size seems to be a factor) inject-loaded Vue components fail to mount due to missing render function.

[LinusBorg]

This is not a regression, it's a result of the documented breaking change concerning require():

Similarly, old CommonJS-style requires will also need to be updated:

// before
const Foo = require('./Foo.vue')

// after
const Foo = require('./Foo.vue').default

The difference when using ?inject compared to the given example above is that you would not do:

const HelloInjector = require('!!vue-loader?inject!@/components/Hello').default // wrong!

because with ?inject, the require does return a constructor, not the module exports object.

Instead, We have to get the .default after we have run the constructor:

const Constructor = Vue.extend(HelloInjector({}).default)

[LinusBorg]

We should fix the docs in this regard, though.

[riovir]

I've applied the suggested fix on the sample repo (also downgraded the inject-loader to 2.0.0):
riovir/injected-component-reprod@8db5a94

Unfortunately the problem persists.

[LinusBorg]

I'll check it out...

[LinusBorg]

Dang, forgot about this one. assigned myself now and will take a look on the weekend hopefully.

[riovir]

Let me know if I can help.

[phoenix741]

I have the same kind of problem :
https://github.com/phoenix741/passprotect-server/blob/update-versions/test/unit/specs/components/user/Login.spec.js

I use es6 import in test (cjs import don't resolve the problem event using .default). When i import vue file without inject, it work, but if i use inject the created mock don't contains the template and i have the warning.

I made a console.log to see the created object :

LOG LOG: Object{name: 'login', mixins: [Object{created: ..., mounted: ..., methods: ...}], data: function data() { ... }, computed: Object{usernameValidation: function usernameValidation() { ... }, passwordValidation: function passwordValidation() { ... }}, methods: Object{submitForm: function submitForm() { ... }}, render: undefined, staticRenderFns: undefined, __file: 'client/components/user/Login.vue'}
ERROR LOG: '[Vue warn]: Failed to mount component: template or render function not defined.

How can i wrote my test ? Is it a bug or it was my mistake ?

[LinusBorg]

Please consult the forum for support.

forum.vuejs.org

[phoenix741]

I have open a topic on the forum.

The problem come from component-normalizer that get compiledTemplate.render and compiledTemplate.staticRenderFns but we should get the compiledTemplate.default.render and compiledTemplate.default.staticRenderFns because i use ES6

[phoenix741]

I have made a correction on my computer (directly in node_modules) in component-normalizer :

// render functions
if (compiledTemplate) {
compiledTemplate = compiledTemplate.default || compiledTemplate
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}