Hello everyone,
I am currently trying to implement unit testing for my Vue 3 + Framework7 application using Vitest. However, I am having trouble using Framework7 components in my tests. I was wondering if anyone has any experience or advice on how to properly set up and use Framework7 components with Vitest in a Vue 3 application.
I have already tried using the mount method from Vue Test Utils to mount the Framework7 components, but I am still getting errors when trying to interact with them in my tests. I would greatly appreciate any guidance or examples of how to properly set up and use Framework7 components with Vitest in a Vue 3 application.
Thank you in advance for any help or advice.
This is the problem:
[Vue warn]: Failed to resolve component: f7-list-item
This is the code:
import { mount } from ‘@vue/test-utils’;
import { describe, it, expect } from ‘vitest’;
import { f7List, f7ListItem } from ‘framework7-vue’;
import { nextTick} from ‘vue’;
import SmartSelect from ‘…/…/…/components/common/SmartSelect.vue’;
const items = [
{ id: 1, title: ‘Option 1’ },
{ id: 2, title: ‘Option 2’ },
];
describe(‘SmartSelect’, () => {
it(‘emits the selected option correctly’, async () => {
const wrapper = mount(SmartSelect, {
global: {
components: { f7List, f7ListItem },
},
props: {
items,
allowWithoutSelection: false,
itemIdType: ‘int’,
},
});
await wrapper.find('select').setValue(2);
await nextTick();
expect(wrapper.emitted().onSelection).toBeTruthy();
});
});