I am currently developing a test for a Vue component that interacts with a module store to execute an action and utilize the result from it.
Since the action involves making requests to our API, I prefer not to run the test using the actual action. Instead, I want to mock the action and return dummy data to verify the functionality of the method flow.
To achieve this in my test, I introduce a mock store with a mocked action that simply returns hardcoded data. The goal is to confirm that the component's method getData() correctly sets the response from the action as the data.
However, it appears that the real action is being called, causing issues. How can I configure everything so that the tests use the created actions instead of the real ones?
Simplified version of the component method:
methods: {
async getData() {
const response = this.$store.dispatch("global/getDataFromAPI")
if (!response) return
this.$data.data = {...response.data}
}
}
Simplified test code:
describe('Component.vue', () => {
let localVue;
let vuetify;
let wrapper;
let store;
beforeEach(() => {
localVue = createLocalVue();
localVue.use(Vuex)
vuetify = new Vuetify();
let globalActions = {
getDataFromAPI: async () => {
return {
status: 200,
data: {
information1: "ABC",
information2: 123,
}
}
}
}
store = new Vuex.Store({
modules: {
global: {
actions: globalActions,
namespaced: false
},
}
})
wrapper = mount(Component, {
localVue,
vuetify,
attachTo: div,
mocks: {
$t: () => { },
$store: store,
},
});
});
it('Ensures that data is correctly set', async () => {
await wrapper.vm.getData();
const dataInformation1 = wrapper.vm.$data.data.information1;
expect(dataInformation1).toBe("ABC")
});