Unable to run typescript files directly Nightwatch

[vaibhavsingh97]

Describe the bug

When trying to run a typescript file using Nightwatch CLI, Nightwatch cannot understand the import statement mentioned in the typescript file.

Steps to reproduce

• Clone https://github.com/nightwatchjs/nightwatch-typescript-boilerplate
• Make changes according to this PR: https://github.com/nightwatchjs/nightwatch-typescript-boilerplate/pull/4/files
• Try to run test
• Command: npm run test (Issue will be reproduced)

Sample test

// Filename: DragAndDrop.ts


import {NightwatchTests} from 'nightwatch';

const home: NightwatchTests = {
  disabled: true,
  'Drag and Drop test': async () => {
    const dragAndDrop = browser.page.DragAndDrop();
    dragAndDrop.navigate();

    const destination = await browser.findElement('#column-b');

    await dragAndDrop.dragAndDrop('@columnA', destination.getId());
    dragAndDrop.expect.element('@columnAHeader').text.to.equal('B');
    browser.end();
  }
};

export default home;

Run with command

$ npx nightwatch DragAndDrop.ts

Verbose output

Wrote HTML report file to: /Users/vaibhavsingh/Dev/nightwatch-typescript-boilerplate/tests_output/nightwatch-html-report/index.html

  → Error

    There was an error while trying to load the file /Users/vaibhavsingh/Dev/nightwatch-typescript-boilerplate/pages/DragAndDrop.ts:
    [SyntaxError] Cannot use import statement outside a module;

 Current working directory is: /Users/vaibhavsingh/Dev/nightwatch-typescript-boilerplate
  → Error

     [SyntaxError] Cannot use import statement outside a module;

Configuration

Default Nightwatch Config

Your Environment

Executable	Version
nightwatch --version	2.3.0
npm --version	8.11.0
node --version	v16.16.0

OS	Version
macOS Monterey	12.5

[garg3133]

Okay, this was due to a silly mistake 😅

We need to add ts-node as part of dependencies and not devDependencies.

[garg3133]

Also, you'd need to add a tsconfig.json file in nightwatch dir which will be used by ts-node while running the ts test file. But I wonder if we can use the file already present in the root dir of the project, why create a new tsconfig.json file just for running Nightwatch tests? I might also add a friction point for the user, although it is only a one-time thing.

/cc: @beatfactor

[beatfactor]

Okay, this was due to a silly mistake 😅

We need to add ts-node as part of dependencies and not devDependencies.

We actually intentionally added ts-node only as a devDependency, it's no "silly mistake". ts-node should not be a main dependency of nightwatch, but rather be installed either separately or via the create-nightwatch tool, if the user has selected TS (together with the nightwatch/ts-config.json file).

[beatfactor]

Also, you'd need to add a tsconfig.json file in nightwatch dir which will be used by ts-node while running the ts test file. But I wonder if we can use the file already present in the root dir of the project, why create a new tsconfig.json file just for running Nightwatch tests? I might also add a friction point for the user, although it is only a one-time thing.

/cc: @beatfactor

We cannot use the existing ts-config.json simply because if the current project happens to be using a different module target than "commonjs" under compilerOptions, then it wouldn't work for nightwatch. And if we create the nightwatch/ts-config.json file during the nightwatch init process, I don't see how it could be a "friction point" for the user.

I think the current solution where users need to use tsc and then execute the output instead of just passing the .ts file as argument is much less desirable.

[garg3133]

Regarding friction point:

• For old projects, there is a friction point which both me and Vaibhav encountered (we both forgot about adding a separate tsconfig.json file in nightwatch dir and errors were not apparent). But this can be resolved by documenting this process and displaying better error messages around this process. (We can also check if the user is working on a typescript but still running tests the js way and show a message to the user that "Nightwatch now supports running the ts tests directly, follow this doc to know more.")
• For new projects (initialized using the init tool), we'll provide everything to the user. But still, the user might end up deleting the nightwatch dir created by us and thus the friction of figuring out why tests are not running after that. Again, can be solved by better error messages around this process.

The new way of running tests in TypeScript is far better, we just need to reduce the pain points of the user while running tests the new way, like explicitly telling them that they are missing a tsconfig.json file in the nightwatch dir, or they are missing the ts-node package (when error occur at those points in code). One thing we should keep in mind while doing this is that users should still be able to run the TypeScript tests the old way (it should not throw any error if the user is running a js test file in a TypeScript project, maybe just a message at the very start that they can now run the ts test files directly).

[vaibhavsingh97]

I agree with @garg3133 👍

Currently, since ts-node is devDependency in the Nightwatch package, the only error users can see the syntax error with the following message ([SyntaxError] Cannot use import statement outside a module;). If we want users to install ts-node in their project, I think that's another friction point we are adding. So my question here would be why we can't have ts-node as dependency?

Also, not utilising project tsconfig configuration is another thing, which users will not see unless we are very clear with the error message displayed in case we aren't able to find tsconfig in the Nightwatch folder.

I guess the main issue is if the current project uses a different module target than "commonjs" under compilerOptions.

We can always read the contents of tsconfig and provide a better error/message where we can let users know that these are the only options that Nightwatch currently supports. Also, suppose the above is the case. In that case, users using the current way of running TypeScript (i.e. compiling typescript to javascript before running the tests) will face issues while running tests with Nightwatch.