Jest : How to mock vue-router used in vuex

I tried to use vue-router inside actions of vuex, which is working fine at localhost.

However, i got errors when I tried to prepare store(for mock) by importing "actions" from store file.

Could you help me out in this issue?

versions

vue-test-utils: 1.0.0-beta.16
yarn: 1.5.1
vuejs: 2.5.13
vue-jest: 1.4.0


error msg

FAIL test/components/main.test.js
● Test suite failed to run

/Users/gulliver/Desktop/test/vue-test-utils-jest-example/node_modules/vue/dist/vue.esm.js:10809
export default Vue$3;
^^^^^^

SyntaxError: Unexpected token export

at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/router/main.js:1:203)
at Object.<anonymous> (src/store/main.js:3:13)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.354s
Ran all test suites matching /test/components/main.test.js/i.
error An unexpected error occurred: "Command failed.
Exit code: 1


app/src/main.js

import Vue from "vue/dist/vue.esm";
import App from './App.vue'
import store from './store/main.js';
import router from './router/main.js';

new Vue({
el: '#app',
render: h => h(App),
store,
router,
})


app/src/store/main.js

import Vue from "vue";
import Vuex from 'vuex';
import router from '../router/main.js'

Vue.use(Vuex)

export const actions = {
locationTo(context, url){
router.push(url)
}
}
export default new Vuex.Store({
actions,
})


app/src/router/main.js

import Vue from "vue/dist/vue.esm";
import VueRouter from 'vue-router';
import root from '../components/root.vue';
import hoge from '../components/hoge.vue';

Vue.use(VueRouter)

export const routes = [
{ path: '/', component: root},
{ path: '/hoge', component: hoge},
];

export default new VueRouter({
mode: 'history',
routes
})


app/test/components/main.test.js

import Vue from "vue";
import Vuex from "vuex";
import { shallowMount, createLocalVue } from "@vue/test-utils";

import { actions } from "@/store/main"; //NOTE: this causes error

import _ from "lodash";
const localVue = createLocalVue();

import root from '@/components/root.vue'
import hoge from '@/components/hoge.vue'

describe('increment.vue', () => {
let propsData;
let store;
let wrapper;

beforeEach(() => {
propsData = _.cloneDeep(personObject)

store = new Vuex.Store(_.cloneDeep({
actions,
}))

const $route = {
path: '/hoge', components: hoge
}

wrapper = shallowMount(root, {
localVue,
propsData,
store,
use: ['Vuex'],
stubs: ['router-view'],
mocks: {
$route
}
})

});

it('test:router in store', () => {
// check if URL changed after action executed
});

})


components

// App.vue
<template>






</template>

// root.vue
<template>

root component

</template>


export default {
mounted () {
this.$store.dispatch('locationTo', '/hoge')
},
}


// hoge.vue
<template>

hoge template

</template>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.