Testcafe: Support custom TypeScript compiler options

[Hotell]

Are you requesting a feature or reporting a bug?

feature

What is the suggested behavior?

TestCafe should provide a way to modify TypeScript compilation options for test files. For instance, there should be an option that enables JSX compilation:

"jsx": "react"

Additional Details

Current behavior

if I wanna import something to test file from file that has an tsx extension f.e.: foo.tsx file, testcafe TS compilation will error out:

testcafe chrome e2e/test.ts

System information

• operating system: OSX
• testcafe version: [email protected]
• node.js version: v8.6.0

[AlexanderMoskovkin]

Hi @Hotell,

Thanks for the proposal, we'll investigate.
As always PR is welcome.

[Hotell]

ok so this won't work, what really needs to be done is to allow testcafe to consume users tsconfig.json

In our case we are using preact with aliases to React typings, so we also need to set jsxFactory: h instead of React standard -> jsxFactory: createElement and many other custom config for path aliasing

[Hotell]

So I've been tweaking testcafe source a bit and come up with something like this for getting needed tsconfig settings from user's tsconfig

https://gist.github.com/Hotell/f88c7588d6e878df87fe01f12019de1f#file-compiler-js-L2-L41

which is almost working , just have to resolve few issues with path mapping

I still got some errors

[AlexanderMoskovkin]

@Hotell, thanks for you investigations. I suppose it can be some conflicts between TestCafe TypeScript settings and a custom tsconfig.

Meanwhile, I think it would be nice to add an ability to pass a custom tsconfig file path to TestCafe run.

[Hotell]

Meanwhile, I think it would be nice to add an ability to pass a custom tsconfig file path to TestCafe run.

working on it, will send PR when ready ;)

[miherlosev]

There is a more one use case:
I want to use JQuery in ClientFunction.

var getElementHeigth = ClientFunction(() => { $(element()).heigth(); }, { dependencies: element});

Then I run TestCafe, I get an error message Cannot find name $.

In this way, I need a way to extend tsconfig used by testcafe for compiling tests.

[andrewbranch]

This is pretty crucial for us as well. We have typings that would be nice to access in ClientFunctions, and they can't be imported from within TestCafe because we use path aliases and decorators in our client code, which aren't compatible with the compiler options TestCafe has hard-coded. Any progress here?

[AlexanderMoskovkin]

Thanks for your point. Actually we didn't work on this yet but it's in our plans.

[ahnpnl]

Hi @AlexanderMoskovkin, are there any workarounds for now to let testcafe read a custom tsconfig ?

[AlexanderMoskovkin]

Hi @AhnpGit,

Sorry for late response. Unfortunately I don't see workarounds here for now. But this feature is in our plans and we'll implement it in future (can't provide estimates for now).

[nzav]

Need that feature as well to add custom paths aliases to tsconfig.

[Foxandxss]

No workaround for this right now? If I import code from my app (to use in tests) and that uses this feature, it fails.

[AndreyBelym]

@Foxandxss, unfortunately you have to compile you app to the plain JS before importing its code from TestCafe test files.

[Foxandxss]

That is problematic.

We have a complex Angular app using stuff like:

import { Foo } from `@core/foo/bar`

So if we try to import from testcafé any angular file (any at all) it will try to compile the entire app and fail because it won't recognize the syntax.

[djbreen7]

Hi @Foxandxss!

Is there a specific reason that you have your testcafe code and your angular code in the same project? I believe the idea is that your testcafe tests exist in their own project and you run them against a served up or deployed app. I'd recommend separating your testcafe tests from your angular app.

Forgive me if I'm confused. :) Maybe there are some unseen benefits to your approach. It just seems uncommon to me.

Regardless, I'm specifically subscribed to this thread in hopes that this feature will be implemented soon. Looks like it's getting there.

[Foxandxss]

@djbreen7 That is possible but Angular projects comes with a nice folder structure & features for e2e so you can plug in testcafé in there. You don't need to touch any of the angular code and it will work perfectly.

The case is that we have an exported enumeration with paths and we would like to use them for t.navigateTo but we can't import it, even if the file is simple, it will try to get the entire angular app for no reason and fail.

[spicywhitefist]

Is there a specific reason that you have your testcafe code and your angular code in the same project? I believe the idea is that your testcafe tests exist in their own project and you run them against a served up or deployed app. I'd recommend separating your testcafe tests from your angular app.

I am also testing an Angular app, but my primary use case for importing app source code into my tests is to reuse interfaces used to describe API responses in my TestCafe RequestMocks. In addition to e2e tests, I would like to use TestCafe's mocking for integration tests that cover otherwise hard-to-reach application states. A guarantee from the compiler that the app and its integration tests both possess a shared understanding of relevant API dependencies would certainly be helpful 😄

[matthess91]

Similar to others, we're building an Angular app and using our API models to set types on our mock data objects as an extra layer of validation for our mocks. I'm getting a TypeScript compiler error for a different model we're not importing so it does seem that TestCafe is pulling and checking everything from the project before running. Changing the import of that model to the full relative path is a temporary workaround. I guess it just doesn't like the @example/core format we had.

[icfantv]

@hotell did you ever get any further than your gist above? I may try to poke at this this morning.

[Hotell]

@icfantv nope. Unfortunately I had other priorities...

[parekhkb]

In order to help keep our E2E test suite sturdy, we want to have our React components define their own test selectors. So we would like our react TSX files to declare static string properties called testSelector, which our TestCafe fixtures would then import. The hope is to break at compilation time if a developer refactors code which removes used test selectors.

In order to do this we need to configure TestCafe to compile JSX.

Please consider this feature for 2019.

[rodmax]

Hi guys... really needed feature to set tsconfig's paths to share typings of API data between app and e2e test, to sync mocks of http data

could someone please point me about status a little more specifically in terms of dates, for example:

"we planning active investigate & implement it this summer 2019"

or

"we are unlikely to do this before winter"

This answer helps me decide on the choice of technology to my active projects

[rbardini]

I second that—our entire codebase is written in .tsx files, and this prevents us from reusing existing typings in E2E tests.

Would it be possible to enable JSX with react mode in the default TestCafe TypeScript settings? I understand this would not fully solve the issue, since different projects have different needs, but it would already cover a lot of common use cases until we have proper support for custom settings.

[aleks-pro]

Hi guys... really needed feature to set tsconfig's paths to share typings of API data between app and e2e test, to sync mocks of http data

could someone please point me about status a little more specifically in terms of dates, for example:

"we planning active investigate & implement it this summer 2019"

or

"we are unlikely to do this before winter"

This answer helps me decide on the choice of technology to my active projects

Hello @rodmax,

At the moment we are not working on this feature, but we have it in our roadmap for 2019. I cannot give you more precise estimate right now.

[aleks-pro]

I second that—our entire codebase is written in .tsx files, and this prevents us from reusing existing typings in E2E tests.

Would it be possible to enable JSX with react mode in the default TestCafe TypeScript settings? I understand this would not fully solve the issue, since different projects have different needs, but it would already cover a lot of common use cases until we have proper support for custom settings.

Hello @rbardini ,

Thank you for the idea. We will take your suggestion into account when we are ready to implement this feature.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.