WebdriverIO and Angular, writing e2e tests in typescript that import classes (Cannot use import statement outside a module)

Question

I am trying to get a wdio set of e2e tests working. Some of the tests use some utility classes written in typescript.

When the test is being compiled it is falling over this error:

Spec file(s): D:\TEMP\xx\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts                                                                               
 Error:  D:\TEMP\xx\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts:1                                                                                  
import {Util} from '../util/util.spec';                                                                                                                        
^^^^^^                                                                                                                                                         
                                                                                                                                                               
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 Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)                                                                                  
    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 D:\TEMP\xx\angular-wdio6-builder-demo\node_modules\@wdio\jasmine-framework\node_modules\jasmine\lib\jasmine.js:89:5                                     
    at Array.forEach (<anonymous>)                                                                                                                             
    at Jasmine.loadSpecs (D:\TEMP\xx\angular-wdio6-builder-demo\node_modules\@wdio\jasmine-framework\node_modules\jasmine\lib\jasmine.js:88:18)                
[0-0] RUNNING in chrome - D:\TEMP\xx\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts      

The above output is from a clone of one of the WebdriverIO Boilerplate Projects. The only change I made (apart from the chromedriver update) was to change the test in this sample to typescript and use a utility class.

I have tried all the options I could find, but none of them fixed the issue, of just running this one simple test. Especially, there seemed no way that any babel configuration was picked up.

The source is located at https://github.com/rgansevles/angular-wdio6-builder-demo (clone from https://github.com/migalons/angular-wdio6-builder-demo)

To reproduce, clone my repo and run:

npm install
npm run e2e

Has anyone an idea how to get this sample working with the import statement?

Thanks in advance,

Rob

Btw, this is the test file it fails on e2e/test/specs/basic.spec.ts :

import {Util} from '../util/util.spec';

const util = new Util();

describe('webdriver.io page', () => {
  it('should have the right title', () => {
    browser.url('');
    const title = browser.getTitle();
    expect(title).toEqual(util.browserTitle);
  });

  it('should say app is running', () => {
    browser.url('');
    const message = $('body > app-root > div.content > div.card.highlight-card.card-small > span').getText();
    expect(message).toEqual('angular-wdio6-builder-demo app is running!');
  });
});

Answer 1

I've got it. Several things are to do:

• Create tsconfig.json within e2e-folder. This file have to extend the basic tsconfig.json and must overwrite:
  • "module": "commonjs"
  • "types": ["node", "@wdio/sync", "@wdio/jasmine-framework"]
• Modify wdio.conf.js to get typescript compiled
  • Use ts instead of js in spec pattern
  • Add requires: ['ts-node/register'] to jasmineNodeOpts
• Within package.json you have to add an environment to script e2e
  • "e2e": "TS_NODE_PROJECT=e2e/tsconfig.json ng e2e"

I`ve forked the same repo and did the changes here: https://github.com/Michel73/angular-wdio6-builder-demo

One thing left: In my VSCode the basic.spec.ts shows compile errors, cause it seems that VSCode always takes the basic tsconfig.js. Therefore I installed the TypeScript Auto Compiler-extension for VSCode.

Answer 2

Could you try adding babel setup to your test framework in wdio js file, For example:

Mocha:

mochaOpts: {
         ui: 'bdd',
        require: ['@babel/register', './test/helpers/common.js'],
        // ...
    },

Jasmine:

jasmineNodeOpts: {
        // Jasmine default timeout
        helpers: [require.resolve('@babel/register')],
        // ...
    },