[Feature] Use existing vite.config.js file for component tests

I have a project that already uses Vite, and is configured with the vite-tsconfig-paths plugin to resolve my paths correctly. It looks like Playwright’s new component testing feature doesn’t use my existing vite.config.js file as it errors when trying to resolve a path that needs to follow my tsconfig path resolution logic.

It’d be nice if Playwright could make use of my custom config and just extend it to point to the correct entry point (e.g. playwright/index.html), or at least allow for configuring extra plugins for Playwright’s vite config to work correctly.

[AlexanderMykulych]

Had the same problem, some of my configurations applied, and some did not. I’ve written my custom vite plugin and defined there config function:

It helped.

[rwoll]

It’s not yet documented[^1], but you can explicitly configure the config (along with a few other options) via: https://github.com/microsoft/playwright/blob/fbb364c1cd0dec9e4a75b885d51e67ca397b1d6a/packages/playwright-ct-react/index.d.ts#L33

import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
import { devices } from '@playwright/experimental-ct-react';

/**
 * See https://playwright.dev/docs/test-configuration.
 */
const config: PlaywrightTestConfig = {
  // …
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    /* Port to use for Playwright component endpoint. */
    ctPort: 3100,

    /* Vite config */
    ctViteConfig: {},
  },

  /* Configure projects for major browsers */
  projects: [
    // …
  ],
};

export default config;

Give it a try and let us know how it goes! If you encounter any issues or have questions, feel free to comment here or open up another issue.

[^1]: Since we announced the feature as a preview, we have not yet given the docs the ❤️ they deserve…yet!