Jest: Как смоделировать vue-router, используемый в vuex - PullRequest
Новая
       21

Jest: Как смоделировать vue-router, используемый в vuex

0 голосов
/ 30 июня 2018

Я пытался использовать vue-router внутри действий vuex, который нормально работает на localhost.

Однако я получил ошибки, когда попытался подготовить хранилище (для макета), импортировав «действия» из файла хранилища.

Не могли бы вы помочь мне в этом вопросе?

1010 * версия *

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

ошибка 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

приложение / 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 / магазин / 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>

1 Ответ

0 голосов
/ 07 июля 2018

Эта ошибка связана с тем, что Jest работает в среде Node.js, и вы используете export default, который не работает по умолчанию в Node.js (Node использует module.exports). Я полагаю, что вы используете веб-пакет для вашей разработки / производственной сборки, но не для тестовой среды.

Вы используете Jest? Если это так, вам нужно настроить babel-jest, чтобы Jest знал, как читать синтаксис модулей ES (import/export).

Подробнее читайте здесь: https://vue -test-utils.vuejs.org / guides / # testing-single-file-components-with-jest

Это может быть неприятно для установки, дайте мне знать, если вам нужна дополнительная помощь, чтобы заставить его работать.

...