During my attempt to run a unit test, I encountered an error when making an axios call. To handle this error, I successfully mocked the call but faced an issue when trying to utilize an external library dependency (specifically, vue-toasted) to display an error message.
The problem arises when the unit test reaches the point where 'toasted' is called and it returns as 'undefined':
TypeError: Cannot read property 'error' of undefined
this.$toasted.error('Search ' + this.searchString + ' returned no results', etc.....
In an effort to resolve this issue, I made an attempt to register the dependency within my test wrapper using the following approach:
import Toasted from 'vue-toasted';
jest.mock(Toasted);
However, these implementations did not seem to supply the wrapper with the necessary dependency. Below you can find the test in question:
it('searches users via axios and returns 404', async () => {
mock.onPost(process.env.VUE_APP_IDENTITY_API_URL + 'user/search').reply(404);
await wrapper.vm.searchUsers(1);
expect(mock.history.post.length).toBe(1);
expect(wrapper.vm.users).toBeNull();
expect(wrapper.vm.pagingInfo).toBeNull();
})
This is how I have structured the mock for my component wrapper:
const wrapper = shallowMount(Users, {
stubs: {
RouterLink: RouterLinkStub
}
});
If anyone has insights on the correct syntax or solution to effectively register this dependency, any help would be greatly appreciated.