Unable to use babel to run typescript tests

[mohanraj-r]

Environment:

• WebdriverIO version: 6.1.17
• Mode: WDIO Testrunner
• If WDIO Testrunner, running sync/async: async
• Node.js version: 12.18.2
• NPM version: 6.14.5
• Browser name and version: Chrome 83.0
• Platform name and version: OSX 10.15.5
• Additional wdio packages used (if applicable):

        "@wdio/cli": "^6.1.17",
        "@wdio/local-runner": "^6.1.17",
        "@wdio/mocha-framework": "^6.1.17",
        "@wdio/spec-reporter": "^6.1.14",
        "chromedriver": "^83.0.0",
        "ts-node": "^8.10.2",
        "wdio-chromedriver-service": "^6.0.3"

Config of WebdriverIO

exports.config = {
    runner: 'local',
    specs: ['__tests__/**/*.ts'],
    filesToWatch: ['./src/**/*.ts'],
    framework: 'mocha',
    mochaOpts: {
        // TypeScript setup
        // require: ['ts-node/register'],
        require: ['@babel/register'],
        ui: 'bdd',
        timeout: 60000,
    },
    maxInstances: 10,
    capabilities: [
        {
            maxInstances: 5,
            browserName: 'chrome',
            'goog:chromeOptions': {
                // https://developers.google.com/web/updates/2017/04/headless-chrome)
                args: ['--headless', '--disable-gpu'],
            },
        },
    ],
    logLevel: 'error',
    bail: 0,
    baseUrl: 'http://localhost',
    waitforTimeout: 10000,
    connectionRetryTimeout: 120000,
    connectionRetryCount: 3,
    services: ['chromedriver'],
}

Describe the bug
Babel Setup · WebdriverIO describes that we should be able to use '@babel/register' to use Babel to compile your test files.
But TypeScript Setup · WebdriverIO uses 'ts-node/register' and doesn't mention how to use '@babel/register' as an option.

I already have a babel.config.js that lets me use jest to run my typescript unit test files

module.exports = {
    presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
};

I would like to reuse babel to run wdio tests as well instead of using ts-node. But I get the following error instead with babel:

packages/wdio/__tests__/wdio.test.ts:8
import * as axe from 'axe-core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Object.newLoader [as .js] (.../node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at .../node_modules/mocha/lib/mocha.js:384:36
    at Array.forEach (<anonymous>)
[0-0]  Error:  Cannot use import statement outside a module
[0-0] FAILED in chrome - /__tests__/wdio.test.ts

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:01

To Reproduce
Steps to reproduce the behavior:

• install @babel/register
• in wdio config file, under mochaOpts replace require: ['ts-node/register'], with require: ['@babel/register'],

Expected behavior

• Should be able to run typescript tests compiled using babel with @babel/register as described in Babel Setup · WebdriverIO
• TypeScript Setup · WebdriverIO should include instructions of how to use babel as an option

Log
Included in description above

Additional context
NA

[mohanraj-r]

• I did find an old issue referencing a similar issue - but the solution doesn't work anymore import not working in spec files #1641 (comment)

• Adding "type": "module" to the nearest parent package.json as mentioned in https://stackoverflow.com/a/59399717 results in the following error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: .../packages/wdio/wdio.conf.js
require() of ES modules is not supported.
require() of .../packages/wdio/wdio.conf.js from .../node_modules/@wdio/config/build/lib/ConfigParser.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename wdio.conf.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../packages/wdio/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1154:13)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at ConfigParser.addConfigFile (.../node_modules/@wdio/config/build/lib/ConfigParser.js:43:50)
    at new Launcher (.../node_modules/@wdio/cli/build/launcher.js:33:23)
    at launch (.../node_modules/@wdio/cli/build/commands/run.js:137:20)
    at Object.handler (.../node_modules/@wdio/cli/build/commands/run.js:171:12)
    at Object.runCommand (.../node_modules/yargs/lib/command.js:240:40) {
  code: 'ERR_REQUIRE_ESM'
}

(replaced absolute path in error with ...)

[christian-bromann]

Why do you need Babel to use TypeScript? Please have a look at our boilerplate projects to see how things get set up: https://webdriver.io/docs/boilerplate.html#pako88wdio-mocha-typescripthttpsgithubcompako88wdio-mocha-typescript

[mohanraj-r]

Thanks @christian-bromann I did look at the boilerplate projects - but couldn't find anything using babel with typescript. Preference for babel instead of ts-node is just for reuse as I already use babel for my project's jest tests and it works fine. Would like to reuse and avoid having an additional redundant dependency if possible.

[christian-bromann]

@mohanraj-r I honestly not sure if this is a WebdriverIO issue. I am happy to add some documentation around this but there is not much we can do on the WebdriverIO side to fix this configuration issue. I recommend to reach out in our support channel on with this question to see if someone uses a similar setup.