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, notifications@github.com 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, notifications@github.com 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')

[OziOcb]

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')

I completely agree, I've just spent 30 min trying to make it work. All because of the example that you've mentioned