[Feature] Component testing Vue plugins

Is there a way to run component tests for Vue Router? For example when sombody wants to test if a link is rendered correctly (see test below) or to test if the user can click on a link and is able to navigate to the correct page?

Related to issue: Plugin Mounting Options

ComponentWorksNot.test.ts:

import { test, expect } from '@playwright/experimental-ct-vue';
import ComponentWorksNot from './ComponentWorksNot.vue';

test('renders a link', async ({ mount }) => {
    const component = await mount(ComponentWorksNot, {
        props: {
            test: 'test'
        }
    });

    await expect(component).toHaveAttribute('href', '/'); // fails because RouterLink is not resolved
});

ComponentWorksNot.vue:

<script lang="ts" setup>
import { RouteName } from '../router';

const props = defineProps<{ test: string }>()
</script>

<template>
 <RouterLink :to="{ name: RouteName.TEST }">{{ props.test }}</RouterLink>
</template>

Full repo can be viewed here

[sand4rt]

Thanks for explaining! It seems to me that Vue is sensitive to this limitation rather than VTU. Would also be good to know what other people think about this issue.

I still believe that global plugin registration would be a huge benefit and will make playwright Vue usable in most cases. Is this something that can already be added? Maybe we can progress later on the “per test plugin registration/overrides”?

Edit:

@pavelfeldman Playwright React community has similar problems:

#15325 How can I use component testing with Redux components

#14750 Need a complex example to test react component which requires internationalization and redux store

#14707 Add feature to allow mocking useRouter in Next.js for component testing

#14345 Allow custom mount fixture for component testing

[sand4rt]

Exposing the app in ‘playwright/index.ts’ sounds like a good idea to me! However i think it’s stil useful to that users are able to override the globally defined plugin options per test. Creating separate files for each override would be a lot of work.

Maybe we can start with the global plugins? And see later how to override the plugin options per test?