Testcafe: .babelrc not running plugin before tests

[aboe026]

Are you requesting a feature or reporting a bug?

Reporting Bug

What is the current behavior?

Import aliases are not being converted to relative paths, leading to Error: Cannot find module on imports.

What is the expected behavior?

The babel-plugin-webpack-alias plugin in .babelrc should run before imports happen, so aliases such as

import dbUtil from 'src/server/mongodb/dbUtil'

get converted to relative paths

import dbUtil from `../../src/server/mongodb/dbUtil'

How would you reproduce the current behavior (if this is a bug)?

Have import aliases working with webpack in webpack config like so:

resolve: {
  alias: {
    'src': path.resolve(__dirname, 'src')
  },
  extensions: ['.webpack.js', '.web.js', '.mjs', '.js', '.json', '.gql']
},

and have the babel-plugin-webpack-alias plugin in .babelrc configured in like so:

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    [ "babel-plugin-webpack-alias", { "config": "webpack.server.config.js" } ]
    "import-graphql",
    "transform-runtime"
  ]
}

Then try to run tests against a .js file that has an alias in its import path.

Provide the test code and the tested page URL (if applicable)

Repo: https://github.com/aboe026/abcstravels/tree/restructure
clone the restructure branch and run the following:

npm install
npm run build
npm run test:browser:chrome

It will fail with Error: Cannot find module 'src/server/mongodb/dbUtil'. But running npm run test:unit or npm run test:func works just fine (they both work with alias imports just fine)

Specify your

• operating system:
  Windows 10 10.0.17134
• testcafe version: 0.20.4
• node.js version: 9.3.0

[MarinaRukavitsyna]

@aboe026
Thank you for pointing out this issue to us. I have reproduced it.
We need some time to research the problem thoroughly.

[patrykkopycinski]

@aboe026 TestCafe is using its own config to transform client code https://github.com/DevExpress/testcafe/blob/d7db4374b16bb95f1e29bf637a2973178afdfe1e/src/compiler/compile-client-function.js#L68

So, in this case, your .babelrc isn't going to be used at all. I can see 2 options:
1) Precompile your tests files with babel and then run testcafe using these files
2) Skip using aliases in test files

[aboe026]

@patrykkopycinski thanks for the workarounds! I'm fairly new to testcafe, so is there a plug in that might do what I'm after? Or would it be and easy thing to write a plug in to do?

[patrykkopycinski]

Compile tests to temporary dir:
"build:tests:browser": babel tests/browser --output-dir tests/browser_tmp
Cleanup temporary dir:
"cleanup:tests:browser": rimraf tests/browser_tmp
Add it to test:
"test": "npm run lint && npm run test:unit && npm run test:func && npm run build:tests:browser && npm run test:browser:chrome && npm run test:browser:firefox && npm run clean:tests:browser"

PS. rimraf is a package that you have to install from npm

[aboe026]

@patrykkopycinski yep I got that. But would there be some way to have testcafe pick up an external babel config file that it can append to its internal one when doing the compilation?

[patrykkopycinski]

Don't think it's possible now. Maybe after migration to babel@7 that allows for easier merging babel configs. But you should ask somebody from the TestCafe team

[aboe026]

@patrykkopycinski ok. Do you know how to contact the TestCafe team?

[MarinaRukavitsyna]

Guys, we will answer you as soon as we research this issue in detail.

[AndreyBelym]

@patrykkopycinski, thank you, TestCafe works exactly as you described.

@aboe026, yes, unfortunately we don't support specifying custom compilation options for test, neither through API or by using .babelrc files. You have to precompile your tests if you need to use additional Babel plugins.

It seems more like a feature request to me, so I close this issue in favor of #2659.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.