Here is my problem that I can't solve:
I would like to test the yearsDropdownItems function of my MonthlyFoodCostModal component. However, I keep getting this error:
TypeError: Cannot read properties of undefined (reading 'outlet_start_date')
How can I set a value to activeOutlet?
Here is my component code :
import { createNamespacedHelpers } from "vuex";
const { mapGetters: userGetters } = createNamespacedHelpers("user");
export default {
computed: {
yearsDropdownItems,
...userGetters([
"activeOutlet"
])
},
};
function yearsDropdownItems() {
const outletStartYear = moment(this.activeOutlet.outlet_start_date).year(),
outletEndYear = moment(this.activeOutlet.outlet_data_validity).year(),
years = this.$utils.range(outletStartYear, outletEndYear);
return this.$utils.sortDesc(years);
}Here is my test code :
import { mount } from "@vue/test-utils"
import MonthlyFoodCostModal from "@/components/monthlyFoodCostModal/monthlyFoodCostModal.js"
import User from "@/store/Module/User/userModule.js"
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
let state;
let store;
describe('Unit test MonthlyFoodCostModal.vue', () => {
beforeEach(() => {
state = {}
store = new Vuex.Store({
modules: {
User: {
state,
getters: User.getters,
namespaced: true
}
}
})
})
it('test yearsDropdownItems method', async() => {
const wrapper = mount(MonthlyFoodCostModal, {store})
expect(wrapper.vm.yearsDropdownItems).toBe("?")
})
})My module behaves as follows:
const initialState = () => ({
user: {
firstName: "",
lastName: "",
role: ""
},
properties: [],
activeProperty: null,
activeOutlet: null,
selectedDevicesFilter: [],
});
export default {
namespaced: true,
state: initialState(),
getters: {
activeOutlet: state => state.activeOutlet
}
}