[Feature]: Better reporting around "Couldn't find a Program" for component tests

[skamansam]

🚀 Feature Request

I recently upgraded a vue 2 project to the latest playwright and I am getting this weird error when running component tests:

playwright test -c playwright-ct.config.js
Error: /__w/my-app/my-app/tests/component/ApiLink.spec.js: Couldn't find a Program
    at e.getProgramParent (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:12:40826)
    at e.crawl (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:12:39221)
    at e.init (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:12:39014)
    at e.Vle (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:19349)
    at e.$le (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:19502)
    at e.Jle (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:20411)
    at b0.visitQueue (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39529)
    at b0.visitMultiple (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39237)
    at b0.visit (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39864)
    at Vce (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:40257)
    at e.Mle (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:18706)
    at b0.visitQueue (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39614)
    at b0.visitSingle (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39303)
    at b0.visit (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39890)
    at Vce (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:40257)
    at e.Mle (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:18706)
    at b0.visitQueue (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39614)
    at b0.visitMultiple (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39237)
    at b0.visit (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:39864)
    at Vce (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:40257)
    at qr (/__w/my-app/my-app/node_modules/.pnpm/[email protected]/node_modules/playwright/lib/transform/babelBundleImpl.js:66:41467)
    at collectJsxComponentUsages (/__w/my-app/my-app/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@playwright/experimental-ct-core/lib/tsxTransform.js:107:29)

I can't locate the source of the error and I have no idea what program it is trying to find. It just spits this error message out for every test in my suite.

Example

Developers would be able to understand which program is missing (or whatever this message really means) so they can understand if this is a playwright configuration issue, a testing setup issue, or whether it is something else.

Motivation

I would like my component tests to work.

[Skn0tt]

Hi! This sounds like a bug to me. Could you show me what ApiLink.spec.js looks like?

[skamansam]

Here is the spec:

ApiLink.spec.js

import { test, expect } from "@playwright/experimental-ct-vue2";
import ApiLink from "@/components/ApiLink.vue";

test.use({ viewport: { width: 500, height: 500 } });
test.describe("ApiLink as list", async () => {
  test.beforeEach(async ({ page, mount }) => {
  });
  test("should show link to api viewer", async ({ mount }) => {
    const component = await mount(ApiLink, {
      props: {
        link: "example.com",
        list: true,
      },
    });
    await expect(component).toContainText("Copy curl command");
  });
  test("should show link to copy curl command", async ({ mount }) => {
    const component = await mount(ApiLink, {
      props: {
        link: "example.com",
        list: true,
      },
    });
    await expect(component).toContainText("Copy curl command");
  });
});

of note, though - the bug above is printed for every spec file..

[Skn0tt]

Hmm, I can't reproduce the error based on that. Could you provide me with a minimal reproduction repository?

Also, I noticed your first line imports @playwright/experimental-ct-vue2. Is that 2 at the end on purpose? That package doesn't exist.

[skamansam]

here is the package - https://www.npmjs.com/package/@playwright/experimental-ct-vue2. i am working on a repro

[Skn0tt]

That package isn't being updated anymore. Please check if the issue also exists with @playwright/experimental-ct-vue.

[agg23]

You most likely have multiple versions of @babel/traverse in node_modules. Try running your project in isolation with a new npm i.