I have successfully tested Vuex getters in isolation from other code, but I am encountering challenges when a getter relies on other getters. Here is an example to illustrate this situation:
getters.js
export const getters = {
getFoo(state) => prefix {
return `${prefix}: ${state.name}`;
},
getFancyNames(state, getters) {
return [
getters.getFoo('foo'),
getters.getFoo('bar')
]
}
}
getters.spec.js
import { getters } = './getters';
const state = {
name: 'stackoverflow'
};
describe('getFoo', () => {
it('return name with prefix', () => {
expect(getters.getFoo(state)('name')).toBe('name: stackoverflow');
});
});
describe('getFancyNames', () => {
// mock getters
const _getters = {
getFoo: getters.getFoo(state)
}
it('returns a collection of fancy names', () => {
expect(getters.getFancyNames(state, _getters)).toEqual([
'foo: stackoverflow',
'bar: stackoverflow'
]);
});
});
When a tested getter depends on another getter that requires arguments, it leads to referencing the original getter.getFoo in the mock, breaking the purpose of mocking and creating interdependent tests. As the dependency graph of getters becomes more complex, the tests become harder to manage.
Perhaps this is the correct approach, but I want to ensure that I am not overlooking any other solutions...