Just testing a basic webpage
<template>
<HomeTemplate />
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async fetch(context) { // or middleware(context)
await context.store.dispatch('categories/index')
}
})
</script>
Want to monitor dispatch and ensure everything goes smoothly, initially tried spying on the action only:
import { Wrapper, shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex, { Store } from 'vuex'
import HomePage from './index.vue'
import { CategoriesState } from '@/store/categories'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('HomePage', () => {
type Instance = InstanceType<typeof HomePage>
let wrapper: Wrapper<Instance>
let store: Store<CategoriesState>
const mockIndex: jest.Mock = jest.fn()
beforeAll(() => {
store = new Vuex.Store({
modules: {
categories: {
namespaced: true,
actions: { index: mockIndex }
}
}
})
wrapper = shallowMount(HomePage, {
stubs: ['HomeTemplate'],
localVue,
store
})
})
it('should call vuex action to fetch categories', () => {
expect(mockIndex).toHaveBeenCalledWith('categories/index')
})
})
Considering that the fetch() or middleware() method receives the nuxt context, attempted to mock it
import { Wrapper, shallowMount } from '@vue/test-utils'
import HomePage from './index.vue'
describe('HomePage', () => {
type Instance = InstanceType<typeof HomePage>
let wrapper: Wrapper<Instance>
const mockIndex: jest.Mock = jest.fn()
beforeAll(() => {
wrapper = shallowMount(HomePage, {
stubs: ['HomeTemplate'],
mocks: {
context: {
store: {
dispatch: mockIndex
}
}
}
})
})
it('should call vuex action to fetch categories', () => {
expect(mockIndex).toHaveBeenCalledWith('categories/index')
})
})
Still facing issues, https://i.sstatic.net/qivTC.png
Any assistance in resolving this would be greatly appreciated!
Thank you!