[Feature]: component tests - add a way to specify babel plugins for test file transformation

[lucy-m]

🚀 Feature Request

I would like to be able to specify additional babel plugins to be passed in for transforming test files. Essentially, I'd like to be able to add to this array:

playwright/packages/playwright-ct-core/index.js

Lines 28 to 30 in 42ade54

	babelPlugins: [
	[require.resolve('./lib/tsxTransform')]
	],

.

Currently, via playwright config use.ctViteConfig.plugins I can specify babel plugins to be used for transforming my app code, but there is no way to specify this for test files.

It may be a good idea to add a way to specify babel plugins to the playwright config which applies to both my app code and the test files?

Example

I'm trying to set up playwright component tests for a project using lingui for localisation. This makes use of macros which requires a babel plugin to transform.

I've set up this repo with some example tests and explanation of the issues I'm facing https://github.com/lucy-m/playwright-lingui-repro.

The TLDR is:

1. Writing a test for a component that uses a lingui macro is fine, as I can specify babel plugin via use.ctViteConfig.plugins.
2. Writing a test that directly uses a lingui macro is not fine, as I cannot specify the babel plugin to use.

Motivation

Currently, if additional babel plugins are required to transform test files, the only way I can see is via patch-package.

It's currently a bit misleading that additional babel plugins can be passed in via use.ctViteConfig.plugins but this applies only to app code. I appreciate that this functionality is not yet documented on https://playwright.dev/docs/test-components#introduction.

[dgozman]

@lucy-m Overall, we'd like the test files be as separate as possible from your app. This means, using browser-specific packages that require special transform goes against such a goal. That said, I'll leave this issue open to prioritization, in case it turns out to be a popular request.