microsoft / microsoft/playwright
[Bug]: playwright-ct: 'Support for the experimental syntax 'decorators' isn't currently enabled' in spec without tsx code
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 96.3k
- Forks
- 6.5k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 180
Description
### Version
playwright/experimental-react-ct: 1.58.2
### Steps to reproduce
1. Clone https://github.com/fvclaus/playwright-react-ct-with-scss
2. `pnpm i`
3. `pnpm run test-ct:ui`
### Actual behaviour
In `Welcome.spec.tsx`
```ts
import Welcome from '~/welcome/welcome';
import { runTestOnComponent } from './helper';
// TODO Uncomment this to make the error go away
// test('should work', async ({ mount }) => {
// const component = await mount();
// await expect(component).toContainText('React Router');
// });
runTestOnComponent({
name: 'Welcome',
Component: Welcome
})
```
I am currently receiving
```
SyntaxError: app/welcome/welcome.scss: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
```
In my actual project, I had several implementations of a component that I wanted to pass to a helper function that creates the actual tests. This issue cost me a few hours, because I thought it wasn't supported at first. Admittedly, it is an edge case and can be easily fixed by adding some tsx code to the spec (like the `` above), but it is quite a misleading error message.
### Expected behavior
A better error message, or we can leave it as is. The workaround is straightforward, and I wanted to document it somewhere so it can be easily found.
### Additional context
_No response_
### Environment
```shell
System:
OS: Linux 6.16 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
CPU: (16) x64 AMD Ryzen 7 2700 Eight-Core Processor
Memory: 15.69 GB / 39.12 GB
Container: Yes
Binaries:
Node: 24.11.1 - /home/fredo/.nvm/versions/node/v24.11.1/bin/node
npm: 11.6.2 - /home/fredo/.nvm/versions/node/v24.11.1/bin/npm
pnpm: 10.28.2 - /home/fredo/.nvm/versions/node/v24.11.1/bin/pnpm
IDEs:
VSCode: 1.106.3 - /snap/bin/code
Cursor: 2.4.21 - /usr/bin/cursor
Languages:
Bash: 5.2.21 - /usr/bin/bash
npmPackages:
@playwright/experimental-ct-react: ^1.58.2 => 1.58.2
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure using the linked playwright-react-ct-with-scss project and the test-ct:ui command. Start with Welcome.spec.tsx and the referenced welcome.scss path, then trace how the component test setup reports the syntax error. Done means either a more accurate error message or documentation of the workaround, with a regression test if the repository provides a suitable location.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- playwright, react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100