[BUG] Unable to resolve TsConfig Aliases in Playwright Component Testing for React

Currently we are unable to resolve our tsconfig.json Alias paths that we set.

The error we receive is:

Context:

• Playwright Version: v.1.28.1
• Operating System: Mac Ventura 13.0.1
• Node.js version: 16.17.1
• Browser: All

Extra

We are using both e2e Playwright tests, and component Testing. Here are the playwright packages being used:

    "@playwright/experimental-ct-react": "^1.28.1",
    "@playwright/test": "^1.28.1",
    "playwright": "^1.28.1",

Code Snippet Component to be tested (it’s a basic sample one)

// src/renderer/components/sample.tsx
import React from "react";

const MyComponent: React.FC = () => {
    return <h1>Hello World</h1>;
};

export default MyComponent;

This works:

import MyComponent from "../../../src/renderer/components/sample";
test("should work", async ({ mount }) => {
    const component = await mount(<MyComponent />);
    await expect(component).toContainText("Greetings");
});

This Does Not work:

import MyComponent from "~Components/sample";

test("should work", async ({ mount }) => {
    const component = await mount(<MyComponent />);
    await expect(component).toContainText("Greetings");
});

Here is the tsconfig.json paths definition

    "paths": {                                    
      "~Components/*": ["src/renderer/components/*"],
    },

Describe the bug

As Stated above, it seems to be an issue with resolving tsconfig.json specifically in the Experimental Testing Components library. Our aliases are resolving fine in our e2e testing suite using playwright.

We have 2 playwright configs:

• 1 for e2e
• 1 for react component testing. The generated one through yarn create playwright --ct is what we use, besides changes to the testDir

const config: PlaywrightTestConfig = {
    testDir: "./__tests__/renderer",
   // ...
}