Vuex mock store undefined in Jest unit test - vue.js

Question

I'm new to jest and am trying to write a unit test that relies on the value of a store property.
I tried to create a new mock store in my test (I already have a mock store for a different test), but for some reason, I keep getting the error
TypeError: Cannot read property 'state' of undefined
My tests are:
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');
});
});
The first two tests, which just use defaultValues for my store, pass.
The last test, 'indicates remove if isItemAddedis true, is the one that fails, and is using the mock store,storeIsAdded`.
If anyone has any insight, it would be much appreciated!!!
EDIT:
Even if I modify my mock store to be more similar to the store that seems to be working, like this:
storeIsInList = new Vuex.Store({
modules: {
userButton: {
namespaced: true,
actions,
state: {
userButton: {
isItemAdded: true,
},
},
},
},
});
I get the same error.

Answer 1

It seems the error is when accessing the store state in the component. So, my guess is that the store maybe need to be module/namespace, i.e.
storeIsInList = new Vuex.Store({
modules: {
userButtons: {
namespaced: true,
actions,
state: {
userButton: {
isItemAdded: true,
},
},
},
},
});
And as #il0v3d0g stated, maybe the namespace name is wrong.