Question

应该很简单的东西似乎在暗示我...

我有一个vue组件，当单击正确的html标记时，将运行触发提交突变的方法。

我要做的就是看到突变确实是在组件中触发的。我可以看到该方法被触发，但没有触发该方法调用的变异。

我正在使用Jest进行测试

目标：验证是否调用了“ setEditUser”提交。

仪表板

Select *
from (Select t.*, 
             Row_number() over (partition by t.employee_id order by t.effective_start_date desc) as rn
      From asg_table t
      Where t.location is null and t.action_code = 'HIRE'
     )
Where rn = 1;

dashboardTest.spec.js

...
<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");
    },

感谢您的帮助！

编辑：弄清楚了.... 当我创建此常量

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

我搞砸了如何调用提交和路由器。可能没有将适当的参数传递给存根。我尝试将适当的参数添加到存根，但还是没有。如果删除存根，则可以验证是否调用了commit和push方法。所以...我创建了另一个单元测试来进行测试。它的代码比我想要的要多，但我确实解决了我的问题：）

似乎无法在Vue组件中测试Vuex突变

0 个答案: