[BUG] I customized ctViteConfig and that not work, error description is confused

[guscj]

Context:

• @playwright/experimental-ct-vue: 1.30.0
• Operating System: Windows
• Node.js version: 14.2
• Browser: Chromium
• Extra: it is a vue project

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and
that we can run and debug locally. For example:

// this is test code
import { test, expect } from '@playwright/experimental-ct-vue';
import Form from 'packages/form/src/form.vue';

test.use({ viewport: { width: 500, height: 500 } });

test('jsx work', async ({ mount }) => {
  await mount(<Form />);
});
// this is config
ctViteConfig: {
      plugins: [
        vue(),
        vueJsx(),
      ],
      resolve: {
        alias: {
          packages: path.resolve(__dirname, './packages'),
         }
     }
}

Describe the bug
I use this to test components.
When I use vscode plugin to run, it says : [vite:build-import-analysis] Parse error @:542:36.
When I use terminal to run, it says: [vite]: Rollup failed to resolve import "packages/form/src/form.vue" from "D:/test-use/playwright/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

@:542:36 is a jsx tag, I think that is why throw error.
But I already config @vitejs/plugin-vue-jsx in ctViteConfig and that not work.
So Its very confused and I dont know what else can do.

Very appriciated if you knew how to solve it!

[sand4rt]

@guscj This seems to be a misconfiguration on your end. I think you can remove this part in the config:

plugins: [
  vue(),
  vueJsx(),
]

For information on using import aliases, see: #17846 (comment)

[guscj]

@guscj This seems to be a misconfiguration on your end. I think you can remove this part in the config:

plugins: [
  vue(),
  vueJsx(),
]

For information on using import aliases, see: #17846 (comment)

Thank u!@sand4rt I add <script lang="jsx"> in my vue component and It can run now. By the way does ctViteConfig as same as vite.config.js? and can I use webpack to run component test?

[sand4rt]

Nice @guscj! Kind of yeah, would recommend reading the docs for more info: https://playwright.dev/docs/test-components.
Why do you want to use Webpack to run component tests?

[guscj]

Nice @guscj! Kind of yeah, would recommend reading the docs for more info: https://playwright.dev/docs/test-components. Why do you want to use Webpack to run component tests?

@sand4rt
Cause we use webpack to build now, and my boss wanna know if we can reuse webpack configs. And if not , how much we need to pay.
And as he said（maybe from intuition） : playwright is a test framework, they shouldn't couple with certain build tool.

I find this link:
#12799
It seams very useful, like: importing component and using JSX syntax where possible.
But your guy says at the end : It is now largely out-of-date.
So I wanna know if there is a new version of the [Feature] Component testing experiments? Cause info in your document (https://playwright.dev/docs/test-components) is kind of too Entry level. If your guys have some more informantion that's very nice!!

[sand4rt]

@guscj Thanks for explaining. The framework components cannot run directly in Node or in a browser (Node/browser does not understand .vue files). Therefore, the components must be transpiled first. This is what every other component testing tool does. There is no way around that. So transpilation must take place with a certain build tool before the components can be tested. Playwright uses Vite under the hood to solve this problem.

If you use Webpack in your application, you could recreate the Webpack config in Vite. I'm still a bit concerned about this, but it is what it is for now i guess. I'm not sure if the Playwright team decides to change things later on.

There is also some relevant info here: #19693 and here: #20193

[guscj]

@guscj Thanks for explaining. The framework components cannot run directly in Node or in a browser (Node/browser does not understand .vue files). Therefore, the components must be transpiled first. This is what every other component testing tool does. There is no way around that. So transpilation must take place with a certain build tool before the components can be tested. Playwright uses Vite under the hood to solve this problem.

If you use Webpack in your application, you could recreate the Webpack config in Vite. I'm still a bit concerned about this, but it is what it is for now i guess. I'm not sure if the Playwright team decides to change things later on.

There is also some relevant info here: #19693 and here: #20193

@sand4rt I understand that! Thank u for your patiently explain. I gonna close this issue. ;)

[guscj]

@sand4rt Hey, guys! I have an idea.
If there is a tool can just transpile build configs from one build tool to another equivally, that's wonderful.

[sand4rt]

@guscj There is no tool for that atm. right? I think will be good to close this one and track this in #20193. What do you think?