Cfrgtkky

I want to setup the following Component and want to run the following basic unit test on it.

(I'm new to Vue.js and not sure which information is valuable for solving my question. Please ask if some other specific code parts would help you to help me.)

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();

  });

});

When I run npm test, I get the following error:

$ 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.

What can I do to solve this error and what is the source of it? As far as I can think of, it looks like it has something to do with Vuex, because it's complaining because of commit() and dispatch() (Vuex-functions). But I'm confused - I'm using no data which is stored in the store in my simple test.

the error says you dont have any tests in your suite. thats because as far as i can see, your using mocha as your testing framwork, and in this framework the word for testing is it and not test.
so try to run this:

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

  it('is a Vue instance', () => {

    const wrapper = mount(UserInformation);

    expect(wrapper.isVueInstance()).toBeTruthy();

  });

});

if its still not working, try installing mocha (run npm i mocha)

It looks like you need to instantiate Vuex within the test.

Your component has this created() hook, so just by creating it you are referencing the vuex instance.

created() {

  this.$store.commit('userStore/setDefaultUserStatus');

  this.$store.dispatch('userStore/getAllUsers');

},

You can use createLocalVue() to get an isolated Vue instance, and add Vuex to it, then pass it via mountOptions to mount().

You can also mock the store so that other tests have control over the data.

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();

  });

});