https://github.com/badsyntax/playwright-test-repo

An example repo showing issues when importing an ES Module in your @playwright/test test file, and a workaround.
https://github.com/badsyntax/playwright-test-repo

playwright playwright-test-runner

Last synced: about 2 months ago
JSON representation

An example repo showing issues when importing an ES Module in your @playwright/test test file, and a workaround.

• Host: GitHub
• URL: https://github.com/badsyntax/playwright-test-repo
• Owner: badsyntax
• Created: 2021-10-14T05:22:12.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-14T07:05:00.000Z (over 3 years ago)
• Last Synced: 2024-11-05T15:53:20.309Z (3 months ago)
• Topics: playwright, playwright-test-runner
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `@playwright/test` issue with ES modules

An example repo showing issues when importing an ES Module in your `@playwright/test` test file, and a workaround.

## Getting Started

```console

nvm use

npm i

npx playwright install

npm test

```

You should see:

```console

❯ npm test

> [email protected] test

> playwright test

Using config at /Users/richardwillis/Projects/chevin/playwright-test-repo/playwright.config.ts

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/richardwillis/Projects/chevin/playwright-test-repo/src/tests/modules/Example.test.ts

    at new NodeError (node:internal/errors:371:5)

    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)

    at Loader.getFormat (node:internal/modules/esm/loader:105:42)

    at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)

    at Loader.import (node:internal/modules/esm/loader:177:17)

    at importModuleDynamicallyWrapper (node:internal/vm/module:437:15)

    at Loader._requireOrImport (/Users/richardwillis/Projects/chevin/playwright-test-repo/node_modules/@playwright/test/lib/test/loader.js:214:52)

    at Loader.loadTestFile (/Users/richardwillis/Projects/chevin/playwright-test-repo/node_modules/@playwright/test/lib/test/loader.js:130:7)

    at Runner._run (/Users/richardwillis/Projects/chevin/playwright-test-repo/node_modules/@playwright/test/lib/test/runner.js:219:40) {

  code: 'ERR_UNKNOWN_FILE_EXTENSION'

}

```

... because we're doing `import { importFromEsModule } from '../../../ESModule';` in one of our test files.

## Workaround

`@playwright/test` doesn't support automatic typescript transpilation for esm modules so we need to manually compile ourselves.

Our [compilation target module](https://github.com/badsyntax/playwright-test-repo/blob/85ad27942cf9ba55dff4724d0d4b115747b5fcea/tests/tsconfig.json#L3) type MUST be `commonjs` UNLESS we change all our import paths (see ).

Our [package type](https://github.com/badsyntax/playwright-test-repo/blob/85ad27942cf9ba55dff4724d0d4b115747b5fcea/package.json#L9) MUST be `commonjs` UNLESS we are compiling to ES modules.

Run `npm run test:fix` to see the workaround:

```console

❯ npm run test:fix

> [email protected] pretest:fix

> tsc --incremental -p tests/tsconfig.json

> [email protected] test:fix

> playwright test -c tests-out

Running 1 test using 1 worker

  ✓  ../tests/Example.test.ts:7:5 › basic test (1s)

  1 passed (2s)

```

The above script has a pre-script hook: `"pretest:fix": "tsc --incremental -p tests/tsconfig.json",` which compiles the test files into commonjs modules which `@playwright/test` runs.