Transpilation issues when intermixing ts/js files for testcafe fixtures

aurelienlair commented 1 year ago

What is your Scenario?

Since in our project we are migrating our codebase from JavaScript to TypeScript we have an intermediate situation where we have both kind of files. We noticed that with TestCafe it is not working well on certain cases and we wanted to report it. To get the detail of the problem we encountered please have a look to the README

What is the Current behavior?

When we run a TestCafe fixtures with ts-node which intermixes ts/js files it is not transpiled properly and we indeed get this error in particular when we have a derived class in JavaScript and a base one in TypeScript

TypeError: Class constructor BasePage cannot be invoked without 'new'

What is the Expected behavior?

To discuss about this problem and eventually understand the possible solution from TestCafe developers to mitigate this cause we for sure will not be the only ones having a mixed situation while migrating a project from JavaScript to TypeScript

What is your public website URL? (or attach your complete example)

https://github.com/musement/qa-test-cafe/tree/testcafe-typescript

What is your TestCafe test code?

Please check directly into the repo

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

Just follow the instruction on the README file and run what is indicated on this paragraph

TestCafe version

2.5.1-rc.1

Node.js version

No response

Command-line arguments

npm run broken:class:1

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

Aleksey28 commented 1 year ago

Hi @aurelienlair,

The behavior from your example is expected. If you want to import one file to another with different types, set extensions in the import string. In your case:

//test-broken.js
//...
import DerivedPage from '../pages/derived-page.ts';
//...

aurelienlair commented 1 year ago

@Aleksey28 have you tried what you're suggested? If not do you mind to try it please? I'm afraid it's not working

TEST_FILE=src/tests/test-broken.js ts-node src/index.js

Running testcafe via node api
TEST_FILE is src/tests/test-broken.js
TS_TARGET for Testcafe compiler options is undefined
 Running tests in:
 - Chrome 112.0.5615.137 / Ventura 13

 Getting Started
 ✖ broken

   1) TypeError: Class constructor BasePage cannot be invoked without 'new'

      Browser: Chrome 112.0.5615.137 / Ventura 13

          1 |import BasePage from './base-page';
          2 |
          3 |export default class DerivedPage extends BasePage {
          4 |  constructor() {
       >  5 |    super();
          6 |  }
          7 |
          8 |  sayHello() {
          9 |    console.log("hello");
         10 |  }

         at new DerivedPage (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/pages/derived-page.ts:5:5)
         at <anonymous> (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:9:10)
         at asyncGeneratorStep (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)
         at _next (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)
         at <anonymous> (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)
         at <anonymous> (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)

 1/1 failed (3s)

 testcafe-typescript@1.0.0 broken:class:2
> TS_TARGET=ESNext TEST_FILE=src/tests/test-broken.js ts-node src/index.js

Running testcafe via node api
TEST_FILE is src/tests/test-broken.js
TS_TARGET for Testcafe compiler options is ESNext
 Running tests in:
 - Chrome 112.0.5615.137 / Ventura 13

 Getting Started
 ✖ broken

   1) TypeError: Class constructor BasePage cannot be invoked without 'new'

      Browser: Chrome 112.0.5615.137 / Ventura 13

          1 |import BasePage from './base-page';
          2 |
          3 |export default class DerivedPage extends BasePage {
          4 |  constructor() {
       >  5 |    super();
          6 |  }
          7 |
          8 |  sayHello() {
          9 |    console.log("hello");
         10 |  }

         at new DerivedPage (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/pages/derived-page.ts:5:5)
         at <anonymous> (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:9:10)
         at asyncGeneratorStep (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)
         at _next (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)
         at <anonymous> (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)
         at <anonymous> (/Users/aurelienlair/Documents/Projects/qa/experiments/qa-test-cafe/src/tests/test-broken.js:2:52)

 1/1 failed (3s)

Aleksey28 commented 1 year ago

I see. I've checked broken:module:* scripts - everything works fine. In broken:class:*, you use ts-node, which takes into account the tsconfig.json config. To make this work, add the "target": "ESNext", property to this config.

DevExpress / testcafe