Currently, I have set up karma and chai for testing purposes and I am attempting to follow the Testing Getters example available here
Below is the code snippet from my fruits.js store:
// fruits.js store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const fruits = new Vuex.Store({
state: {
fruits: [
{id: 1, name: 'Apple'},
{id: 2, name: 'Banana'},
{id: 3, name: 'Orange'}
]
},
mutations: {
},
actions: {
},
getters: {
getFruitById (state, {id}) {
return state.fruits.find(fruit => {
return fruit.id === id
})
}
}
})
Additionally, here is a glimpse of my fruit.spec.js file:
// fruit.spec.js
import { expect } from 'chai'
import { fruits } from '../../../../src/store/fruits'
describe('getters', () => {
it('getFruitById()', () => {
// mock data
const state = {
fruits: [
{id: 1, name: 'Apricot'},
{id: 2, name: 'Kiwi'},
{id: 3, name: 'Watermelon'}
]
}
const id = 1
// find fruit by id
const result = fruits.getters.getFruitById(state, {id})
expect(result).to.deep.equal([
{
id: 1,
name: 'Apricot'
}
])
})
})
Upon running the test in my fruit.spec.js, an error message "undefined is not a function" appears on line
const result = fruits.getters.getFruitById(state, {id})The main issue lies in the fact that the mock state in fruit.spec.js is not being passed correctly into fruit.js
What steps can be taken to ensure the successful execution of the test?