Open
Description
🚀 Feature Request
Allow create-playwright
to generate the boilerplate code of the common Vue mount options. These APIs are also in Vue Test Utils and Testing Library, but it's not that obvious that this is also possible through the hooksConfig
in one way or the other.
Providing those mount options directly inside the hooksConfig depends on #30269 tho and is desired for Angular as well: #27783 (comment).
Example
// playwright/index.ts
import type {
Component,
DefineComponent,
Plugin,
ComponentOptions,
Directive,
} from 'vue';
export type HooksConfig = {
components?: Record<string, Component | DefineComponent>;
plugins?: (Plugin | [Plugin, ...any[]])[];
directives?: Record<string, Directive>;
provide?: Record<string, any>;
mixins?: ComponentOptions[];
};
beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
for (const [name, component] of Object.entries(hooksConfig?.components || {}))
app.component(name, component);
for (const plugin of hooksConfig?.plugins || []) {
if (Array.isArray(plugin))
app.use(plugin[0], ...plugin.slice(1))
else
app.use(plugin)
}
for (const [name, directive] of Object.entries(hooksConfig?.directives || {}))
app.directive(name, directive);
for (const [key, value] of Object.entries(hooksConfig?.provide || {}))
app.provide(key, value);
for (const mixin of hooksConfig?.mixins || [])
app.mixin(mixin);
});
// component.test.ts
import { router } from './router'; // note: `router` is not defined in a .vue file
import { Component } from './Component.vue';
import { Provide } from './provide'; // note: `Provide` is not defined in a .vue file
import { Directive } from './directive'; // note: `Directive` is not defined in a .vue file
await mount(App, {
hooksConfig: {
plugins: [router],
components: { Component },
mixins: [Mixin],
provide: { Provide },
directives: { Directive },
},
});
Motivation
These are not documented anywhere, even though most users needs this