CODEWITHSUNDEEP
javascriptunit-testingvue.jsmocha.jskarma-runner
smarber
smarber

Reputation: 5074

I need to inject plugins in my tests otherwise I get an ERROR LOG

I'm wanting to test a component where I call $t() to translate my texts and this.$route.name.

The test I created passes but with many ERROR LOG:

ERROR LOG: '[Vue warn]: Error in render function: "TypeError: undefined is not a function (evaluating '_vm.$t('contact')')"

ERROR LOG: '[Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 'this.$route.name')"

Here is my main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n'

import router from './router';

import messages from './messages';

Vue.use(VueI18n);

const i18n = new VueI18n({
    fallbackLocale: 'fr',
    locale: 'fr',
    messages,
});

Vue.config.productionTip = false

let vm = new Vue({
    el: '#app',

    i18n,

    router,
});

// Once page is reloaded
i18n.locale = vm.$route.params.locale;

And here is my test: MyComponent.spec.js

describe('MyComponent', () => {
 // other tests on the object MyComponent (not its instance)

 // Mount an instance and inspect the render output
    it('renders the correct message', () => {
        const Ctor = Vue.extend(MyComponent);
        const vm = new Ctor().$mount();
    });
});

When I try to inject i18n:

  import VueI18n from 'vue-i18n'

  const vm = new Ctor(new VueI18n({fallbackLocale: 'fr', locale: 'fr', messages,})).$mount();

I get this error

PhantomJS 2.1.1 (Linux 0.0.0) ERROR TypeError: undefined is not an object (evaluating 'Vue.config')

package.json

"dependencies": {
    ...
    "vue": "^2.3.3",
    "vue-i18n": "^7.1.1",
    "vue-router": "^2.6.0"
},
"devDependencies": {
    ....,
    "chai": "^3.5.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "phantomjs-prebuilt": "^2.1.14",
    "mocha": "^3.2.0",
}

Upvotes: 0

Views: 637

Answers (1)

smarber
smarber

Reputation: 5074

I used to fix my problem, and through mount method I could inject the component dependency.

MyComponent.spec.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import { mount } from 'avoriaz';

import MyComponent from '@/components/my_component/MyComponent.js';

Vue.use(VueI18n);

describe('MyComponent', () => {
    const i18n = new VueI18n({
        locale: 'fr',
        messages,
    });
    const $route = { name: 'toto' };

    const wrapper = mount(MyComponent, {
        i18n,
    });

    it('renders the correct message', () => {
        expect(wrapper.text()).to.contains('CONTACT');
    });
});

Upvotes: 1

Related Questions