vue.js - 笑话:如何模拟 vuex 中使用的 vue-router
问题描述
我尝试在 vuex 的操作中使用 vue-router,它在本地主机上运行良好。
但是,当我尝试通过从商店文件导入“动作”来准备商店(模拟)时出现错误。
你能帮我解决这个问题吗?
版本
vue-test-utils: 1.0.0-beta.16
yarn: 1.5.1
vuejs: 2.5.13
vue-jest: 1.4.0
错误信息
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
应用程序/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,
})
应用程序/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,
})
应用程序/src/路由器/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
})
应用程序/测试/组件/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
});
})
成分
// App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
// root.vue
<template>
<div>
<p>root component</p>
</div>
</template>
<script>
export default {
mounted () {
this.$store.dispatch('locationTo', '/hoge')
},
}
</script>
// hoge.vue
<template>
<div>
<p>hoge template</p>
</div>
</template>
解决方案
此错误与 Jest 在 Node.js 环境中运行的事实有关,并且您使用的是export default
,默认情况下在 Node.js 中不起作用(Node 使用module.exports
)。我猜您正在将 webpack 用于您的开发/生产构建,而不是用于测试环境。
你在用 Jest 吗?如果是这样,您需要进行设置,babel-jest
以便 Jest 知道如何阅读 ES 模块语法 ( import/export
)。
在这里阅读更多:https ://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
这可能很烦人,如果您需要更多帮助才能使其正常工作,请告诉我。
推荐阅读
- python - 从列表中获取“边号”
- javascript - 锚标签内的 div 不占用整个宽度?HTML 和 CSS
- python - 如何将另一种语言的代码转换为 Python?
- java - Gradle javadoc 任务在 Java 10 中失败
- python-3.x - 焦点问题
- python - 使用 pandas 读取每日时间序列并重新采样到每月
- maven - 将 jhipster 微服务推送到 Cloud Foundry 时出现抽象方法错误
- ios - 注销/登录时刷新 UI 选项卡栏控制器状态
- android - 正在寻找一种在 Android 中使用 Google 地图按类别隐藏/显示标记组的智能方法?
- python - 应该测试 tdd 的静态文本,例如电子邮件主题?