I'm trying to test a basic Vue Component that makes reference to a Vuex store. I thought I followed Vue's example (https://vue-test-utils.vuejs.org/guides/using-with-vuex.html#mocking-getters) to a T but it doesn't appear to be working.
I get the error that is mentioned in the title.
const localVue = createLocalVue()
localVue.use(Vuex)
describe('Navbar.vue', () => {
let store: any
let getters: any
beforeEach(() => {
getters: {
isLoggedIn: () => false
}
store = new Vuex.Store({
getters
})
})
it('renders props.title when passed', () => {
const title = 'Smart Filing'
const wrapper = shallowMount(Navbar, {
propsData: { title },
i18n,
store,
localVue,
stubs: ['router-link']
})
expect(wrapper.text()).to.include(title)
})
})
I'm using class components so maybe that has something to do with it?
@Component({
props: {
title: String
},
computed: mapGetters(['isLoggedIn'])
})
export default class Navbar extends mixins(Utils) {}
Thanks in advance.
The "getters" here is not properly assigned:
beforeEach(() => {
getters: {
isLoggedIn: () => false
}
store = new Vuex.Store({
getters
})
})
It should be getters = {...
rather than getters: {...
because your argument to beforeEach is a function and not an object.
I can confirm that it is indeed correctly written in the documentation.
Good luck!
Figured it out.
When you declare the getter in the component, make sure to define the variable that is going to be used.
@Component({
props: {
title: String
},
computed: mapGetters(['isLoggedIn'])
})
export default class Navbar extends mixins(Utils) {
isLoggedIn!: boolean <== I did not have this before.
...
}
Edit: Also, I wasn't actually using the mock getter in the test so you don't even need to mock the store. All you need to do is declare that variable on the component.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With