[BUG] Vue 3 Component Test Error: "ReferenceError: Item is not defined"

Context:

• Playwright Version: 1.27.1
• Operating System: Windows
• Node.js version: 16.17.0
• Browser: All
• Extra: Vite, Vue 3

playwright test -c playwright-ct.config.ts

Hi, I have just migrated from Cypress to Playwright and have encountered a similar issue to https://github.com/microsoft/playwright/issues/17957 in Vue 3.

I’m defining an item type from withing my MultiSelect SFC component like so:

<script lang="ts">
export class Item {
  static defaultHeight = 32;

  key: number | string;
  label: string;
  height: number;
  disabled: boolean | undefined;

  constructor(
    key: number | string,
    label: string,
    height?: number,
    disabled?: boolean
  ) {
    this.key = key;
    this.label = label;
    this.height = height ?? Item.defaultHeight;
    this.disabled = disabled;
  }
}
</script>

Then I just normally reference said type when mocking data for the component test. This leads to ReferenceError: Item is not defined when running the test.

[sand4rt]

Hi @StepanMynarik, good choice:) could you provide the test and the full component?

[StepanMynarik]

Thanks for having patience with me.

I just like to keep my SFCs tight. I even use the custom <i18n> block for localization. I can just grab any component and copy it into a separate repro/demo/any other project.

Also in combination with <style scoped> block, you will never have useless css nor localization tuples leftovers again.

I also enjoy not having to fish for any component related stuff. You only have the test tsx file right next to it, which is perfect.

Any tips on stripping the spec.tsx files from the final build?