Тест настройки для приложения Vue.js-Electron, которое использует Vuex - PullRequest
Новая
       18

Тест настройки для приложения Vue.js-Electron, которое использует Vuex

0 голосов
/ 20 ноября 2018

Я хочу настроить следующий компонент и выполнить на нем следующий базовый модульный тест.

(Я новичок в Vue.js и не уверен, какая информация полезна для решения моего вопроса. Пожалуйста,спросите, не помогут ли вам другие конкретные части кода.)

user-information.vue: 

<template>
<v-layout row wrap justify-center id="wrapper">
  <v-flex class="text-xs-center centered">
    <v-card>
      <v-card-title primary class="title">
        User Management
      </v-card-title>
    </v-card>
  </v-flex>
  </v-layout>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    users: state => state.userStore.users,
    status: state => state.userStore.status
  }),
  created() {
    this.$store.commit('userStore/setDefaultUserStatus');
    this.$store.dispatch('userStore/getAllUsers');
  },
  methods: {
    deleteUser
      this.$store.commit('userStore/setDefaultUserStatus');
      if (confirm('Are you sure?')) {
        this.$store.dispatch('userSTore/deleteUser', userId);
      }
    }
  }
}
</script>

LandingPage.spec.js: 

import { mount } from '@vue/test-utils';
import UserInformation./../../src/renderer/components/User/user-information.vue';

describe('user-information.vue', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(UserInformation);
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

Когда я запускаю npm test, я получаю следующую ошибку: 

$ npm test

> management-system@0.1.0 test /home/juri/develop/management-system
> jest

 FAIL  test/e2e/specs/Launch.spec.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:256:22

 FAIL  test/unit/specs/LandingPage.spec.js
  ● Console

    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'commit' of undefined"
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'commit' of undefined
          at VueComponent.created (/home/juri/develop/management-system/src/renderer/components/USer/user-information.vue:85:1)
          at callHook (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2919:21)
          at VueComponent.Vue._init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4628:5)
          at new VueComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4796:12)
          at createComponentInstanceForVnode (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4308:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4129:45)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in created hook: "TypeError: Cannot read property 'commit' of undefined"

      found in

      ---> <Anonymous>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'commit' of undefined
          at VueComponent.created (/home/juri/develop/management-system/src/renderer/components/User/user-information.vue:85:1)
          at callHook (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2919:21)
          at VueComponent.Vue._init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4628:5)
          at new VueComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4796:12)
          at createComponentInstanceForVnode (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4308:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4129:45)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'state' of undefined"
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'state' of undefined
          at VueComponent.mappedState (/home/juri/develop/management-system/node_modules/vuex/dist/vuex.common.js:793:31)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at Watcher.evaluate (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3247:21)
          at Proxy.computedGetter (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3505:17)
          at Proxy.render (/home/juri/develop/management-system/src/renderer/components/User/user-information.vue:275:417)
          at VueComponent.Vue._render (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4542:22)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:21)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4135:13)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

      found in

      ---> <Anonymous>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'state' of undefined
          at VueComponent.mappedState (/home/juri/develop/management-system/node_modules/vuex/dist/vuex.common.js:793:31)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at Watcher.evaluate (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3247:21)
          at Proxy.computedGetter (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3505:17)
          at Proxy.render (/home/juri/develop/management-system/src/renderer/components/User/user-information.vue:275:417)
          at VueComponent.Vue._render (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4542:22)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:21)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4135:13)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)

  ● user-information.vue › is a Vue instance

    TypeError: Cannot read property 'state' of undefined



      at VueComponent.mappedState (node_modules/vuex/dist/vuex.common.js:793:31)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.js:3247:21)
      at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.js:3505:17)
      at Proxy.render (src/renderer/components/User/user-information.vue:275:417)
      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4542:22)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:21)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at init (node_modules/vue/dist/vue.runtime.common.js:4135:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.js:5606:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.js:5553:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6089:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2658:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
      at Object.test (test/unit/specs/LandingPage.spec.js:26:21)

Test Suites: 2 failed, 2 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.625s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Что я могу сделать, чтобы устранить эту ошибку и каков ее источник?Насколько я могу судить, похоже, что это как-то связано с Vuex, потому что жалуется из-за commit() и dispatch() (Vuex-функции).Но я запутался - в моем простом тесте я не использую данные, которые хранятся в магазине.

1 Ответ

0 голосов
/ 20 ноября 2018

Похоже, вам нужно создать экземпляр Vuex в тесте.

У вашего компонента есть этот created() хук, поэтому просто создав его, вы ссылаетесь на экземпляр vuex. 

created() {
  this.$store.commit('userStore/setDefaultUserStatus');
  this.$store.dispatch('userStore/getAllUsers');
},

Вы можете использовать createLocalVue () , чтобы получить изолированный экземпляр Vue и добавить к нему Vuex, а затем передать его через mountOptions на mount().

Вы также можете высмеятьсохранить , чтобы другие тесты могли контролировать данные.

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'

const localVue = createLocalVue()
localVue.use(Vuex)

const storeOptions = {
  state: ...
  getters: ...
  mutations: ...
};
const mockStore = new Vuex.Store(storeOptions)

describe('user-information.vue', () => {

  let wrapper;
  beforeEach(() => {
    const mountOptions = {
      localVue,
      store: mockStore
    }
    wrapper = mount(UserInformation, mountOptions)
  });

  test('is a Vue instance', () => {
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});
...