webdriverio: [🐛 Bug]: run is not working when project already has a misconfigured tsconfig.json

WebdriverIO Version

7.16.3

Node.js Version

14.17.5

Mode

Standalone Mode

What happened?

The starter project generated with @wdio/cli does not run if a tsconfig.json already exists and is not properly configured.

What is your expected behavior?

Everything should work without any issues after installing WebdriverIO on an existing project.

How to reproduce the bug.

The original use case was to install wdio on an existing angular project.

But for the sake of this issue it can be reproduced as follow:

Create a folder test then go inside
```
mkdir test
cd test
```

Create a tsconfig.json file

{
  "compilerOptions": {
      "module": "es2020"
  }
}

Install WebdriverIO with typescript as a compiler
```
npx wdio .
```
Run the tests
```
wdio run wdio.conf.ts
```
The following error occurs:

SyntaxError: Unexpected token ‘export’

Proposal

Actually, the @wdio/cli looks for a tsconfig.json file in the current directory and ignores it if it founds one or create one otherwise. But to me the problem is that existing typescript projects will always have a tsconfig.json file and those should only serve the main project itself. We should not use the same tsconfig.json for both the main project and the tests.

I think something like this would be more suitable:

project
├── test
│   ├── pageobjects
│   ├── specs
│   └── tsconfig.json
└ tsconfig.json

WebdriverIO would always look up for a tsconfig.json in the test folder. This file would be created during each installation (no need to detect it anymore or to configure it manually afterwards). And this file would always guarantee that everything is properly configured for wdio to work.

Relevant log output

export const config: WebdriverIO.Config = {
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)

Code of Conduct

I agree to follow this project’s Code of Conduct

Is there an existing issue for this?

I have searched the existing issues

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 20 (20 by maintainers)

Commits related to this issue

Fix for bug #7640 run is not working when project already has a misconfigured tsconfig.json (#7720) * Fix for misconfigured tsconfig * modified message * Added review changes * Added automc... — committed to webdriverio/webdriverio by praveendvd 3 years ago

Most upvoted comments

or you want to move wdio.config.ts also inside test folder as @Badisi mentioned ?

🤔 understand, ok then I suggest these two cases:

tsconfig file exist in root folder -> create wdio.conf.ts and wdio tsconfig.json within /test
tsconfig doesn’t exist -> create both in the root folder as it is atm

Would that work?

christian-bromann on Nov 18, 2021

@christian-bromann will pick this up then 🥳

praveendvd on Nov 17, 2021

@praveendvd the suggestion here is to create a separate tsconfig.e2e.json file that is specific to WebdriverIO. Some Angular apps run e.g. with ESM modules only and then it is better to have a separated tsconfig for e2e tests.

christian-bromann on Nov 15, 2021

@praveendvd ,

The wdio-entrypoint.js is not even needed as you can make it run like this :
```
$ npx wdio run ./wdio.conf.ts --autoCompileOpts.tsNodeOpts.project=./test/tsconfig.json
```
And no need for an autoCompileOpts options in the tsconfig.json either.
If you leave the wdio.conf.ts outside the /test folder or at least do not leave it alongside a proper tsconfig.json (with wdio types) then a code editor like Vscode won’t be able to find the typing for config: WebdriverIO.Config. In my example wdio-harness I have put everything that’s wdio related inside the tests folder. I like it that way because everything is bundled and self-sufficient.

@christian-bromann,

Indeed that would be a solution, but all and all I think it would add more complexity.

Badisi on Nov 18, 2021

@praveendvd how about this:

if the user picks TypeScript as compiler we could add a question to the configuration wizard asking whether or not they want to re-use their current tsconfig.json or create a new one specific for e2e tests (which should be the default option here). If the user picks creating a new tsconfig, we create that file (in ./tests/tsconfig.json) with the content you mentioned above and add autoCompileOpts to the wdio.conf.ts.

christian-bromann on Nov 18, 2021

should we move this under test folder ?

I would suggest yes, because there are cases where e.g. Angular users want a different tsconfig for their app than for their tests. In general it makes sense to separate them.

christian-bromann on Nov 17, 2021