[Question] @playwright/test - Ignore .tsx files when running tests

Asking this as a question rather than a bug report, as I hope I’m just doing something wrong in my configuration here. Was previously running Playwright tests via Jest, and am trying to switch to the official test runner. However, when executing npx playwright test, it fails with an SyntaxError: Unexpected token '<' when it attempts to parse a .tsx file that contains a React component. The tests themselves do not use or import React components, they just happen to be in same codebase.

All of my e2e-related code is consolidated under a test/e2e/ directory. Will try to share all of the relevant information that I can.

Environment

Our app is a Next.js app - React/TypeScript on the front-end, Express/TypeScript on server-side, all in one repo.

1. OS - Fedora 35
2. Node.js version - 16.13.0
3. Playwright - @playwright/test 1.18.1

Configuration files

.babelrc

{
  "env": {
    "local": {
      "presets": ["next/babel"],
      "plugins": []
    },
    "development": {
      "presets": ["next/babel"],
      "plugins": []
    },
    "production": {
      "presets": ["next/babel"],
      "plugins": []
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]],
      "plugins": []
    }
  },
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

playwright.config.ts

import { PlaywrightTestConfig } from "@playwright/test";
import { ENV_URLS } from "./server/constants";

const config: PlaywrightTestConfig = {
  globalSetup: require.resolve("test/e2e/setup"),
  use: {
    baseURL: ENV_URLS.local,
  },
  // have tried with/without these last two, no difference in error
  testMatch: "test/e2e/**/*.test.ts",
  testDir: "test/e2e", 
};

export default config;

package.json

{
   ...,
   "scripts": {
       ...,
       "test:e2e": "playwright test"
    }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "*": [
        "types/*"
      ]
    },
    "lib": [
      "dom",
      "es2016"
    ],
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "outDir": ".next/tsc-cache/",
    "incremental": true,
    "experimentalDecorators": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

[pavelfeldman]

Keeping the issue tracker healthy, so closing this one. Please feel free to open a new issue if this does not cover your use case and link this one.

[tylucaskelley]

Yes! Will make a note to do so when I get some free time. Will try to set up a test repo w/ our configuration + a file that hopefully causes the error