Can't seem to test Vuex Mutation in Vue Component

Viewed 179

What should be pretty simple seems to be alluding me...

I have a vue component that when the correct html tag is clicked, a method is run that triggers a commit mutation.

All I want to do is see that the mutation is indeed triggered in the component. I can see the method get triggered but not the mutation that the method calls.

I am using Jest for testing

Goal: Verify the 'setEditUser' commit is called.

Dashboard

...
<tr
  id="editUserTr"
  class="col1"
  v-for="listUser in users"
  v-bind:key="listUser.email"
  @click="editUser(listUser)"
  >
  <td>{{listUser.id}}</td>
  <td>{{listUser.first_name}}</td>
...

methods: {
    editUser(listUser) {
      this.$store.commit("setEditUser", listUser);
      this.$router.push("/editUser");
    },

dashboardTest.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Dashboard from '../../src/components/Dashboard.vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';

const fb = require('../../src/firebaseConfig.js');
const sinon = require('sinon');

const localVue = createLocalVue();

localVue.use(Vuex, VueRouter);

describe('Dashboard.js', () => {

beforeEach(() => {
        const mutations = {
            setEditUser: jest.fn(),
        };
        const getters = {
            userProfile: () => jest.fn(),
            users: () => jest.fn(),
        };
        const $router = {
            push: jest.fn(),
        };
        const store = new Vuex.Store({ mutations, getters });
    });

test('Edit User function does not error out', () => {
        const userProfile = {
            role: ['admin'],
        };
        const wp = shallowMount(Dashboard, {
            store,
            localVue,
            mocks: {
                $router,
            },
            computed: {
                userProfile() {
                    return userProfile;
                },
                users() {
                    return {
                        users: {
                            id: 'someEmail@email.com',
                            first_name: 'Stub',
                        },
                    };
                },
            },
        });
        const userInfo = wp.vm.users;
        const stub = sinon.stub(wp.vm, 'editUser');
        wp.findAll('td').at(0).trigger('click');
        expect(mutations.setEditUser).toHaveBeenCalledWith({}, {userInfo}) // Fails. Says: Number of calls = 0
        expect(stub.callCount).toBe(1);// Passes
  });
});

Thanks for your help!

Edit: Figured it out.... When I create this constant

const stub = sinon.stub(wp.vm, 'editUser');

I am messing with how the commit and router get called. Probably not passing in the proper arguments to the stub. I tried adding the proper arguments to the stub but still no go. If I remove the stub then I can verify that the commit and push methods get called. So... I created another unit test that just test that. Its more code then what I would like but I did solve my issue for now :)

0 Answers
Related