playwright icon indicating copy to clipboard operation
playwright copied to clipboard

[REGRESSION]: Component testing fails when using aliases in `ctViteConfig`

Open stephenwade opened this issue 1 year ago • 0 comments

Version

1.42.1

Steps to reproduce

  1. Clone https://github.com/stephenwade/playwright-issue-repro-vigilant-giggle
  2. Run npm install
  3. Run npm test

Expected behavior

The test runs.

Actual behavior

The test does not run. The following error is displayed:

Error: [vite:load-fallback] Could not load /app/MyComponent (imported by tests/MyComponentTest.tsx): ENOENT: no such file or directory, open '/app/MyComponent'

Additional context

This only happens when both of these conditions are met:

  • The config file uses ctViteConfig.resolve.alias to add an alias path.
  • The aliased path is imported by a helper file, not by the test file.

I can't remove the ctViteConfig settings because my project uses paths in the TSConfig file. My bundler understands the paths, but Vite in Playwright component testing doesn't.

This was working fine in 1.41.2.

Environment

System:
    OS: macOS 14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 46.35 MB / 16.00 GB
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.12.1 - /usr/local/bin/pnpm
  IDEs:
    VSCode: 1.87.2 - /usr/local/bin/code
  Languages:
    Bash: 5.2.26 - /usr/local/bin/bash
  npmPackages:
    @playwright/experimental-ct-react: 1.42.1 => 1.42.1 
    @playwright/test: 1.42.1 => 1.42.1

stephenwade avatar Mar 13 '24 05:03 stephenwade