[Question] playwright-ct (Vue): using (global) plugins inside component tests

[jeffhuys]

Hi! I'm trying to use the experimental component testing part of Playwright.
I saw this issue kind of asking the same thing: #15472
And that issue was marked completed, mentioning this PR: #15551

However, I don't see how that PR would work in my case. I am mounting a component that uses the global variable $t which is a function that translates every string for us.
In our main.ts, it looks a bit like this:

import { App, createApp } from 'vue';
import i18n from '@/translations/plugin';

const app = createApp(AppComponent);
// ... other plugins
app.use(i18n);
// ... other plugins
app.mount('#app');

And inside @/translations/plugin.ts, it looks like this:

import { useI18n } from '@/translations';
import { Plugin } from 'vue';

const plugin: Plugin = {
  install(app) {
    const { t, format } = useI18n();

    app.config.globalProperties.$t = t;
    app.config.globalProperties.$format = format;
  },
};

export default plugin;

This exposes the $t variable to our entire app, to use in the templates.

Is there any way to make this work inside the components as well? Am I reading the PR I mentioned correctly that it only allows beforeEach and afterEach?

Thanks for reading, and please let me know if you need more details!

[sand4rt]

Hi, you can register the plugin in the beforeMount hook. This can be defined in playwright/index.ts like:

import { beforeMount } from '@playwright/experimental-ct-vue/hooks';
import i18n from '../src/translations/plugin';

beforeMount(async ({ app }) => {
   app.use(i18n);
});

[aslushnikov]

@jeffhuys Closing as per above! Please do not hesitate to file new issues with questions and suggestions, and thank you for trying component testing. :)