Problems calling createLocalVue

[gsccheng]

I'm trying to set up some unit tests with Vuex according to the instructions to mock with modules. I'm using mocha-webpack.

However, I'm getting an error like the person is having here.

RUNTIME EXCEPTION  Exception occurred while loading your tests

TypeError: key.charAt is not a function
    at Object.has (/path/to/.tmp/mocha-webpack/1514500595138/bundle.js:24884:50)
    ...

So in my test spec:

// Hello.spec.js

import Vuex from 'vuex';
import { createLocalVue } from 'vue-test-utils';

import myModule from "../../../../store/modules/users";
const localVue = createLocalVue(); // Problem goes away if this is commented out.

describe("Hello World", () => {
});

I think there's some collision with Vue.use(Vuex) during bootstrap? But, it's not easy for me to separate that and the components usage of it during my tests cases.

My package.json test script looks like this

    "unit": "BABEL_ENV=test mocha-webpack --webpack-config build/webpack.test.conf.js --require test/unit/.setup src/**/*.spec.js --watch",

---

UPDATE WITH MORE INFO

My problem may have something to do with how webpack is not resolving index.js correctly from the directory name.

This configuration results in the charAt error I listed above. However, it still remains true that if I exclude createLocalVue() I get no problems and tests are able to run fine.

// ../../../../store/modules/users.js

import { foo } from "../../../libs";
console.log('foo is', foo) 
// foo is function foo(bar) {
//  return bar;
// }
export default { } ; 

This configuration (when I change to import { foo } from "../../../libs/foo" works fine with all my tests running successfully.

// ../../../../store/modules/users.js

import { foo } from "../../../libs/foo";
console.log('foo is', foo) 
// foo is function foo(bar) {
//  return bar;
// }
export default { } ; 

// foo.js

export const foo = bar => bar;

// ../../../libs/index.js

export { foo } from "./foo";

Here's my webpack config. I have no issues running the code in other environments (e.g. development, production).

[lmiller1990]

Normally you don't use the real Vuex store in your tests, since vue-test-utils is for testing components. (You can test Vuex mutation/action/getters without vue-test-utils, just using any old JS framework).

Can you post the entire code (component, module file)? There might be a better alternative that using your actual Vuex store. Or, if you post all the code, we can find the conflict.

I write a lot about this here, you can take a look there, or I can help you work through testing your component here.

[eddyerburgh]

Are you able to provide a minimal reproduction?

[gsccheng]

Thanks guys, I'll provide some more code later today.

@lmiller1990 Thanks for the post, but yeah I'm not trying to use the real Vuex store and as you can see in my test spec I'm trying to create a local Vue to mock it (I didn't include the localVue.use(Vuex) because it was already breaking before that as noted in my comments.

However, Webpack seems to still need to bundle all the other components that depend on Vuex, and there's some conflict going on somewhere when I call createLocalVue().

[eddyerburgh]

Potentially this is caused by a previously installed plugin.

We should add a try/catch in the createLocalVue implementation and throw a more user friendly error message if it errors for some reason.

[gsccheng]

@eddyerburgh I have wrapped createLocalVue in a try/catch but get the same error message.

try {
  const localVue = createLocalVue();
  localVue.use(Vuex);
}
catch(err) {
  console.log('err is', err)
}

Actually doing a reproduction may be a little more complicated, so before I do that, do you know of any existing examples of vue-test-utils+mocha-webpack+vuex? @eddyerburgh The closest I see is your example but it uses Karma. Maybe I can compare my setup to existing examples to get ideas to solve my problem However, I updated the original question with a little more info that may spark some ideas.

[ross2411]

We're having a similar issue. I'll try and get a repro to you guys tomorrow to see if you can help us (and @gsccheng )

[gsccheng]

@ross2411 Preliminarily it looks like it's caused by Vue Material:

Vue.use(VueMaterial)

Are you using that library too?

[eddyerburgh]

I'm going to close this as it sounds like its an issue with the plugin you're using.

Feel free to open a new issue with a reproduction if you'd like more input (I could create an issue in the plugin repo if I have a reproduction). You can use this JSFiddle as a template for the repro—Can you create a full reproduction using this JSFiddle as a starting point—https://jsfiddle.net/eddyerburgh/2mzsL00d/4/

[ross2411]

Sorry been slow to respond. We're using vuetify and suspect the problems lies there too

[ghost]

Same using the vue-js-modal, trying to figure out what's going on.