How to implement Vitest + Vue3 + Framework7 Unit testing?

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: {
allowWithoutSelection: false,
itemIdType: ‘int’,

await wrapper.find('select').setValue(2);
await nextTick();


1 Like

Hello guys, any help here? I stay at the same situation.

1 Like

Hope anyone could help us

Framework7 and its components heavily relies on user interaction and they are complex things, which are not really suit for unit testing. I strongly recommend to uses e2e tests (Cypress) instead

I have realized that I am approaching the tests in a mistaken way, I should not test if F7 returns the value that I expect since that would be testing F7, what I should do is simulate that F7 returns the correct value and test that my functions work correctly.
Thanks for your answer!