Vue-cli: Testing with inject-loader does not work out of the box.

[thomasmichaelwallace]

Version

2.9.3

Steps to reproduce

• Setup a project using babel, mocha/chai and inject-loader
• Injecting a module will return: "Module parse failed: 'import' and 'export' may only appear at the top level inject"

What is expected?

The module injection function to be returned.

What is actually happening?

Test fails due to invalid configuration.

---

A workaround for this is to set the VUE_CLI_BABEL_TRANSPILE_MODULES flag while testing.

[yyx990803]

vue-loader no longer works with inject-loader in 14.0+ because it does not work with ES modules.

We will suggest a different solution for mocking during tests after more investigation.

[thomasmichaelwallace]

Thanks @yyx990803 - isn't esModules an option in vue-loader that can be set to false (or you can use the babel workaround I mentioned, which seems to be used when Jest is selected.)

I'm happy to do a PR to switch this on for mocha/chai so that the inject-loader approach noted on the vue-loader documentation works out of the box: https://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html

[morningdew830]

@yyx990803 Is there any replacement for inject-loader? or is there an option to enable using of inject-loader in vue-cli 3?

[thomasmichaelwallace]

@morningdew830 - you can work around it by using VUE_CLI_BABEL_TRANSPILE_MODULES=*

e.g. the test command should be:
"test": "VUE_CLI_BABEL_TRANSPILE_MODULES=* vue-cli-service test"

[thomasmichaelwallace]

I actually made the jump to karma in the end because I needed some of the browser built-ins; but happy to do a PR to fix this with mocha if it's still an issue?

It's all about this line: https://github.com/vuejs/vue-cli/blob/b20f624c32a5a82e7ae5b48369068039be881251/packages/%40vue/babel-preset-app/index.js#L141

[morningdew830]

Thanks for quick help! @thomasmichaelwallace
Unfortunately, I just tried with the environment but still getting the same error.

This is the old test code that had been working with vue-loader v13.

// eslint-disable-next-line import/no-webpack-loader-syntax
const injector = require('inject-loader!@/store/modules/hello-world')

/* test command */
"test:unit": "cross-env VUE_CLI_BABEL_TRANSPILE_MODULES=* vue-cli-service test:unit",

The project is created by vue-cli 3.0.1.

Any good idea?

[thomasmichaelwallace]

Hmm.

Give me a day (it's evening where I am!) I'll see if I can get my old
project with the fix working again with the latest version.

What you've got to do is change that usESModules to false in the resulting
webpack/vue-loader configuration.

On Mon, 20 Aug 2018, 20:32 morningdew, [e-mail] wrote:

Thanks for quick help! @thomasmichaelwallace
https://github.com/thomasmichaelwallace
Unfortunately, I just tried with the environment but still getting the
same error.

[image: image]
https://user-images.githubusercontent.com/22661536/44362037-6054a100-a4f2-11e8-84d0-e387fa160b01.png

This is the old test code that had been working with vue-loader v13.

// eslint-disable-next-line import/no-webpack-loader-syntax
const injector = require('inject-loader!@/store/modules/item')

Any good idea?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-cli/issues/947#issuecomment-414435365, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AB3UHTxEU4Es_59jWmKo4e9E50nOkUaIks5uSw6-gaJpZM4SeZhM
.

[morningdew830]

Thanks again!
I just updated the presets in the babel configuration so it worked.

--- babel.config.js ---

  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]

[thomasmichaelwallace]

Interesting.

Do you still need the env flag with that too?

On Mon, 20 Aug 2018, 20:49 morningdew, [e-mail] wrote:

Thanks again!
I just updated the presets in the babel configuration so it worked.

--- babel.config.js ---

presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-cli/issues/947#issuecomment-414440727, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AB3UHdRkIKSiTb0X_qor6XnAbMy9Xm-Eks5uSxLhgaJpZM4SeZhM
.

[morningdew830]

no need, that env flag doesn't effect for me but I think it would be better if it works.

[salvadordiaz]

@thomasmichaelwallace @morningdew830 :

I had to add es6.module to the polyfills section to make it work. My babel.config.js looks like this:

module.exports = {
    presets: [
        ['@vue/app', {
            polyfills: [
                'es6.promise',
                'es6.symbol',
                'es6.module'
            ]
        }]
    ]
};

[IlyaEremin]

Hello. Since inject-module no longer supported then I guess It would be good to remove inject-module from examples: https://vuex.vuejs.org/guide/testing.html
const actionsInjector = require('inject-loader!./actions')