[TypeScript] Add capability to specify the custom module path mapping mechanism (specified by the paths and baseUrl options)

[agentHoover]

What is your Test Scenario?

Using Testcafe version: 1.4.0

Following the documentation here: https://devexpress.github.io/testcafe/documentation/test-api/typescript-support.html

I created a typescript config file in the root of my project with the following:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { "helpers": ["src/shared/helpers/"]
        },
        "resolveJsonModule": true,
    }
}

I added a reference to the tsConfigPath in the .testcaferc:

{
    "tsConfigPath": "tsconfig.json",
    "browsers": [
        "chrome:headless --no-sandbox",
        "firefox:headless"

    ],
    "reporter": [
        { "name": "spec" },
        {
            "name": "trx",
            "output": "output/reports/report.trx"
        }
    ],  
    "screenshotPath": "output/screenshots",
    "takeScreenshotsOnFails": true,
    "screenshotPathPattern": "testimages/${FIXTURE}/${TEST_ID}/${DATE}_${TIME}/${BROWSER_VERSION}/${FILE_INDEX}.png"
}

In my test file I added the following import:

import { annotateTestOutput,visualValidation } from 'helpers';

What is the Current behavior?

When I run testcafe I get the following error:

> npm run e2e ./src/store-web/**/*.e2e.ts

npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\10.14.2\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> ua-testcafe@1.0.0 e2e D:\dev\urbanair\AdminApp-FrontEnd\e2e
> testcafe "./src/store-web/**/*.e2e.ts"

ERROR Cannot prepare tests due to an error.

Error: Cannot find module 'helpers'
    at Object.<anonymous> (D:\dev\urbanair\AdminApp-FrontEnd\e2e\src\store-web\tests\parks\parks.e2e.ts:4:1)
    at Function._execAsModule (D:\dev\urbanair\AdminApp-FrontEnd\e2e\node_modules\testcafe\src\compiler\test-file\api-based.js:50:13)
    at TypeScriptTestFileCompiler._runCompiledCode (D:\dev\urbanair\AdminApp-FrontEnd\e2e\node_modules\testcafe\src\compiler\test-file\api-based.js:150:42)
    at TypeScriptTestFileCompiler.execute (D:\dev\urbanair\AdminApp-FrontEnd\e2e\node_modules\testcafe\src\compiler\test-file\api-based.js:174:21)
    at Compiler._getTests (D:\dev\urbanair\AdminApp-FrontEnd\e2e\node_modules\testcafe\src\compiler\index.js:85:35)
    at Compiler._compileTestFiles (D:\dev\urbanair\AdminApp-FrontEnd\e2e\node_modules\testcafe\src\compiler\index.js:99:35)

What is the Expected behavior?

The module should resolve using the paths defined in the tsconfig file. I know the tsconfig file is being found and parsed because if I add, for example, module or target settings I get the testcafe warning about not being able to override those settings.

Your Environment details:

• testcafe version: 1.4.0
• node.js version: 10.14.2
• platform and version: Windows 10

[miherlosev]

At present, we use the standard Node.js module resolving mechanism for all test types (JavaScript, TypeScript, Flow and CoffeeScript). It means that the custom module path mapping mechanism from TypeScript (specified by the paths and baseUrl options) is not supported.

[justrhysism]

Well that's surprising, given in that it states in the CHANGELOG that it is:

TestCafe now allows you to specify the TypeScript compiler options in the tsconfig.json configuration file. You can use these options to enable JSX compilation, import code or typings with paths aliases, set aliases to React typings, or customize other compiler settings.

An example is even provided!

[miherlosev]

We will fix Changelog and documentation. https://github.com/DevExpress/testcafe/issues/4153

[AndreyBelym]

Also was discussed on StackOverflow: https://stackoverflow.com/questions/57014497/how-to-resolve-non-relative-paths-with-testcafe-when-using-typescript

TypeScript doesn't substitute real module paths for mapped module paths, see this comment and thread for an explanation:

Well and to add context, "paths" is designed for use with loaders that allow remapping, unlike the Node.js require(). The intended behaviour is to allow TypeScript to resolve type information for various module IDs used by various loaders, not to rewrite module IDs.

The tsconfig-path module can resolve mapped module paths at runtime. I think TestCafe should load it automatically.

As a workaround, you can install tsconfig-path and testcafe locally and load tsconfig-path with TestCafe by using the --require argument in the following way:

node --require tsconfig-path ./node_modules/testcafe/bin/testcafe-with-v8-flag-filter.js chrome tests

[pupudu]

Hey @AndreyBelym Do you know a way to require tsconfig-path with the testcafe programming API? Thanks

[alexey-lin]

Hi @pupudu,

You can use require('tsconfig-path') in a test script. Is this what you meant by your question?

[pupudu]

Hi @alexey-lin Thanks for your suggestion mate, that worked well. I also found just after, that simply starting the server with -r tsconfig-path/register also works. Just need to make sure that the correct tsconfig.json is loaded with the programming API. Test cafe is awesome. Undoubtedly the best e2e test framework.

[jsdevtom]

@AlexKamaev This is not an enhancement, rather a bug. TestCafe documentation explicitly states this behaviour is supported but it is not: Please change the label to reflect this issue being a bug.

[miherlosev]

Hi @jsdevtom

It's a documentation issue. We've already fixed the code examples (https://github.com/DevExpress/testcafe/pull/4155) and will solve the problem with the documentation. I've created a separate issue for this.

[Foxandxss]

It is a bit sad that this is "fixed" by updating the doc like that.

I am a testcafe poweruser (I use it in many projects, I teach about it to big companies and I speak at conferences as well).

I am reaching a point where I can't defend it anymore against Cypress.

I love testcafe, I really do, but stuff like this is a step back.

In Angular world, we use a tool called "Nx" to create workspaces. Workspaces are composed by many different projects and libraries. The way we communicate with those projects and libraries is using this paths feature. It makes no sense to replace the cypress that comes there with Nx with Testcafé because it could make the testing a nightmare.

It is not like you import lots of projects things within testcafé, but sometimes I need an interface or an enumeration and this makes it complicated.

Honestly I am unsure how hard is this to fix, but typescript is getting bigger every day and we need testcafe to follow the path.

[pupudu]

@Foxandxss It would be nice if testcafe supported paths out of the box, indeed. But honestly, I don't see a big issue in using tsconfig-paths with the extra flag. Works great to the date in my case. Did you find any issues with that approach?

[Foxandxss]

I think i missed that extra flag you mention.

El mié., 11 nov. 2020 9:27, Pubudu Dodangoda notifications@github.com escribió:

@Foxandxss https://github.com/Foxandxss It would be nice if testcafe supported out of the box indeed. But honestly, I don't see a big issue in using tsconfig-paths using the extra flag. Works great to the date in my case. Did you find any issues with that approach?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DevExpress/testcafe/issues/4144#issuecomment-725280852, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIJTVLMBTLHSL3SBNEQNALSPJDG7ANCNFSM4ILKXEWA .

[reh2ur]

The suggested solutions with tsconfig-paths do not work for me.

TS_NODE_PROJECT=tsconfig.test.json node -r tsconfig-paths/register ./node_modules/testcafe/bin/testcafe-with-v8-flag-filter.js --app "http-server -a localhost -p 5000 --proxy 'http://localhost:5000?' dist" --live

I am having a project with one src and one testcafe directory and I am trying to import @shared/... from one of my test files, while my tsconfig.json refers to a folder in src/shared.

"@shared/*": ["src/app/shared/*"],

The tsconfig.test.json just extends the tsconfig.json with a different baseUrls.

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "baseUrl": "./"
    }
}

Still do I get the following error when running the tests:

Cannot find module '@shared/translation/models/Language'

Any idea how I can debug this further?

[pupudu]

@reh2ur Have you tried importing the module instead?

i.e. on the top of your entry point,

import 'tsconfig-paths/register';

[chezwicker]

Is there a way to do this globally so we don't have to import "tsconfig-paths/register" in each test?

[leo-coco]

Hi @alexey-lin Thanks for your suggestion mate, that worked well. I also found just after, that simply starting the server with -r tsconfig-path/register also works. Just need to make sure that the correct tsconfig.json is loaded with the programming API. Test cafe is awesome. Undoubtedly the best e2e test framework.

Could you please share the whole yarn or npm command, to start the testcafe server and using tsconfig-paths/register

[rushby]

@leo-coco

node --require tsconfig-paths ./node_modules/testcafe/bin/testcafe-with-v8-flag-filter.js chrome ../mytests/*.ts

And make sure .testcaferc.json has:

"tsConfigPath": "tsconfig.json"

[Klaster1]

FYI you can add require('tsconfig-paths').register into ".testcaferc.js", no need to add it in every test or pass the --require to node. I'd really like to see TestCafe support paths, though.

[lithin]

I've tried all of the above in our project and couldn't get this to work. Does anyone have a working example in an open source repo I could check out?