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 :)