Under a specific condition, I dynamically imported a component and stored it in an object property. Then, I displayed it in the template using vue
<component :is="">[Function anonymous]
Function:
export default function useCharts() {
const {isValid} = storeToRefs(useValidInfo());
const charts = computed(() => [
{
id: 'themes',
component: isValid.value ? async () => import('./path/component1') : null,
grow: '0',
title: 'component1',
}
]);
return {
charts
}
}
Test Case:
jest.mock('./path/component1', () => 'component1');
describe('useCharts', () => {
beforeEach(() => {
setActivePinia(createPinia());
});
it('should return charts', () => {
const store = useValidInfo();
store.setIsValid(true);
const {charts} = useCharts();
expect(charts.value).toEqual([
{
id: 'themes',
component: component1, // this is the mock, i see [Function anonymous]
grow: '0',
title: 'component1',
}
]);
});
});