I found a solution to my problem and wanted to post it here for anyone having a similar issue. Basically, I restructured the component by moving the logic out of the lifecycle hook and testing the new method directly.
Here is the new method:
const onMountedHandlerAsync = async () => {
applicationStore.updateShowSpinner(true);
if (await disclosureStore.getDisclosuresListAsync()) {
disclosures.value = disclosureStore.disclosures;
if (
disclosures.value.length > 0 &&
disclosures.value.length === selectedDisclosures.value.length
) {
emit('form-status-updated', true, null);
}
applicationStore.updateShowSpinner(false);
goTo(0, { duration: 200, easing: 'linear' });
}
};
Here is the restructured lifecycle hook:
onMounted(async () => {
await onMountedHandlerAsync();
});
Here is the unit test:
it('should get disclosures from the disclosureStore and populates the component disclosures on the onMounted lifecycle', async () => {
// Arrange
const appStore = mockedStore(useApplicationStore);
appStore.updateShowSpinner.mockImplementation(() => {});
const disclosureStore = mockedStore(useDisclosureStore);
disclosureStore.updateSelectedDisclosures.mockImplementation((selected: IDisclosure[]) => {
const store = useDisclosureStore();
store.$state.selectedDisclosures = selected;
});
disclosureStore.getDisclosuresListAsync.mockResolvedValue(true)
disclosureStore.disclosures = [
<IDisclosure>{
id: 1,
name: 'Disclosure 1',
displayName: 'Disclosure 1',
url: 'http://localhost/api/disclosures/disclosure-1',
},
<IDisclosure>{
id: 2,
name: 'Disclosure 2',
displayName: 'Disclosure 2',
url: 'http://localhost/api/disclosures/disclosure-2',
},
<IDisclosure>{
id: 3,
name: 'Disclosure 3',
displayName: 'Disclosure 3',
url: 'http://localhost/api/disclosures/disclosure-3',
},
];
wrapper.vm.selectedDisclosures = [
<IDisclosure>{
id: 1,
name: 'Disclosure 1',
displayName: 'Disclosure 1',
url: 'http://localhost/api/disclosures/disclosure-1',
},
<IDisclosure>{
id: 2,
name: 'Disclosure 2',
displayName: 'Disclosure 2',
url: 'http://localhost/api/disclosures/disclosure-2',
},
<IDisclosure>{
id: 3,
name: 'Disclosure 3',
displayName: 'Disclosure 3',
url: 'http://localhost/api/disclosures/disclosure-3',
},
];
// Act
await wrapper.vm.onMountedHandlerAsync();
await flushPromises();
const disclosures = wrapper.vm.disclosures;
// Assert
expect(disclosureStore.getDisclosuresListAsync).toHaveBeenCalled();
expect(disclosures.length).equals(3)
});