[Question] - Component Testing

Hey guys, I am facing some issues trying to run some component tests. I am following the docs (https://playwright.dev/docs/test-components#how-to-get-started) and when running the first command, I can’t find any experimental module being installed, which I think is the one that needs to be used on the test file. Also, the npm run test-ct should be a script that executed “playwright test?”

I am not sure if the files mentioned in the docs should be added automatically to the project, but they are not , so I am creating them manually, after manually installing the “experimental-ct-react’” module.

Once I installed that and created both files, (.html and .js), I created my test class:

const { test, expect } = require('@playwright/experimental-ct-react');
const CookieBanner = require('../../../src/components/CookieBanner');
//import CookieBanner from '../../../src/components/CookieBanner/'

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

test('event should work', async ({ mount }) => {
  let clicked = false;
  const component = await mount(<CookieBanner></CookieBanner>);

  await expect(component).toContainText('Submit');

  await component.click();

  expect(clicked).toBeTruthy();
});

When running playwright test, the issue is:

SyntaxError: Unexpected token ‘<’

The CookieBanner component is a .jsx file using export defaults.

Any help is appreciated. Thanks

[imartinflores]

Thanks @rwoll , appreciated!

[rwoll]

I am not sure if the files mentioned in the docs should be added automatically to the project, but they are not , so I am creating them manually

It should create the starter files automatically and install @playwright/experimental-ct-react automatically, so if it didn’t do that, something might be broken! Sorry about that!

Can you try again and (1) paste the output here, and (2) describe where you are running the command, where your package.json is (and generally the layout of your project)?

$ npm init playwright@latest -- --ct

Thanks for your patience as we start collecting feedback from the preview!