Question

我不是开玩笑的新手，正在尝试编写依赖于store属性值的单元测试。

我试图在测试中创建一个新的模拟存储（我已经有一个用于其他测试的模拟存储），但是由于某种原因，我一直收到错误消息

TypeError: Cannot read property 'state' of undefined

我的测试是：

import { shallowMount, createLocalVue,} from '@vue/test-utils';
import userButtons from '@components/user-profile/UserButtons.vue';
import Vuex from 'vuex';
import { defaultValues, } from '@store/api/userButtons.js';

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

describe('UserButtons', () => {
  let actions; 
  let store;
  let storeIsAdded;

  beforeEach(() => {
    actions = {
      getUserInfo: jest.fn(),
    };
    store = new Vuex.Store({
      modules: {
        userButtons: {
          namespaced: true,
          actions,
          state: {
            userButton: defaultValues,
          },
          mutations: {
            setUserButton: jest.fn(),
          },
        },
      },
    });
    storeIsAdded = new Vuex.Store({
      state: {
        isItemAdded: true,
      },
    });
  });
  test('vuex called on create', () => {
    shallowMount(UserButtons, { store, localVue, propsData: { id: 3406304, }, });
    expect(actions.getUserInfo).toHaveBeenCalled();
  });

  test('renders correctly', () => {
    const wrapper = shallowMount(UserButtons, { store, localVue, propsData: { id: 3406304, }, });
    expect(wrapper.element).toMatchSnapshot();
  });

  test('indicates remove if isItemAdded is true', () => {
    const wrapper = shallowMount(UserButtons, { storeIsAdded, localVue, propsData: { id: 3406304, }, });
    expect(wrapper.find('.button-action.my-items').text()).toBe('- Remove from My Items');
  });
});

前两个测试通过，它们仅对我的商店使用defaultValues。

最后一个测试'indicates remove if isItemAdded is true',是失败的，并且正在使用模拟存储storeIsAdded。

如果有人有任何见识，将不胜感激！！！

编辑：

即使我将我的模拟存储修改为与似乎正在运行的存储更相似，也是如此：

storeIsInList = new Vuex.Store({
  modules: {
    userButton: {
      namespaced: true,
      actions,
      state: {
        userButton: {
          isItemAdded: true,
        },
      },
    },
  },
});

我遇到同样的错误。

Answer 1

似乎错误是在访问组件中的商店状态时。所以，我的猜测是商店可能需要是模块/命名空间，即

storeIsInList = new Vuex.Store({
  modules: {
    userButtons: {
      namespaced: true,
      actions,
      state: {
        userButton: {
          isItemAdded: true,
        },
      },
    },
  },
});

正如@il0v3d0g 所说，也许命名空间名称是错误的。

在Jest单元测试中未定义Vuex模拟存储

1 个答案: