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:

vue-cli/packages/@vue/babel-preset-app/index.js

Line 141 in b20f624

useESModules: !process.env.VUE_CLI_BABEL_TRANSPILE_MODULES,

[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, ***@***.***> 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 <#947 (comment)>, 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, ***@***.***> wrote: Thanks again! I just updated the presets in the babel configuration so it worked. --- babel.config.js --- presets: [ ***@***.***/app', { polyfills: [ 'es6.promise', 'es6.symbol' ] }] ] — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#947 (comment)>, 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