Has anyone got this working with playwright component testing?

[adrhumphreys]

Just been having a look at how we'd go about writing component tests and found playwright component testing which looks really promising.

I've set up a test with the Button.spec.tsx:

import { test, expect } from "@playwright/experimental-ct-react";
import { Button } from "./Button";

test.use({ viewport: { width: 500, height: 500 } });

test("should work", async ({ mount }) => {
  const component = await mount(<Button type="button">Click me</Button>);
  await expect(component).toContainText("Click me");
});

A button component Button.tsx:

import { AllHTMLAttributes } from "react";
import * as styles from "./Button.css";

interface Props extends AllHTMLAttributes<HTMLButtonElement> {}

export const Button = ({ children }: Props) => {
  return (
    <button type="button" className={styles.button}>
      {children}
    </button>
  );
};

And then the css which is Button.css.ts

import { style } from "@vanilla-extract/css";

export const button = style({
  borderWidth: 2,
  borderStyle: "solid",
  borderRadius: 3,
  fontWeight: 600,
  fontSize: "1rem",
  transition: "all 0.2s ease-in-out",
  letterSpacing: 0.5,
  lineHeight: 1,
  userSelect: "none",
  padding: "10px 24px",
});

I've then configured the playwright-ct.config.ts to include the vite plugin for vanilla extract, but when running the tests I get the Styles were unable to be assigned to a file. error

Also worth mentioning that removing the .ts.css import will result in it working (so not a mis-setup in general)

[adrhumphreys]

Well, starting from a fresh repo things were easier and just ran into some issues with the React.createElement import going weird (fix is to just update esbuild's jsxInject)

Example repo of it all working together: https://github.com/adrhumphreys/vanilla-extract-nextjs

[midzdotdev]

Any chance we could get a live link? I'm also looking for a solution

[gkiely]

@adrhumphreys Did you have any luck getting this working?

[gkiely]

I ended up getting it working using a sample from: #1051

import { defineConfig, devices } from '@playwright/experimental-ct-react';
import { vanillaExtractPlugin as vanillaExtractESBuildPlugin } from '@vanilla-extract/esbuild-plugin';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default defineConfig({
  // ...
  use: {
    ctViteConfig: {
      optimizeDeps: {
        esbuildOptions: {
          plugins: [
            vanillaExtractESBuildPlugin({
              runtime: true,
            }),
          ],
        },
      },
      plugins: [
        vanillaExtractPlugin(),
      ],
    }
  }