SyntaxError: Unexpected token import when trying t

Question

I've written an angular 4 app and now I'm trying to run some e2e based tests using Protractor.

Am I missing something here?

Error when trying to run test script:

[rob@work repo]$ npm run e2e

> repo@1.0.0 e2e /home/rob/git/repo
> protractor protractor.config.js

[20:12:24] I/launcher - Running 1 instances of WebDriver
[20:12:24] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
[20:12:25] E/launcher - Error: /home/rob/git/repo/test/e2e/app.ui.test.ts:3
import { browser } from 'protractor';
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /home/rob/git/repo/node_modules/jasmine/lib/jasmine.js:93:5
    at Array.forEach (native)
[20:12:25] E/launcher - Process exited with error code 100

protractor.config.js

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  multiCapabilities: [{
    'browserName': 'chrome'
  }],
  specs: ['test/e2e/**/*.ts'],
  mochaOpts: {
    reporter: 'spec',
    slow: 5000,
    timeout: 5000
  }
};

e2e test file (app.ui.test.ts):

'use strict';
import { browser } from 'protractor';
const HOST_URL = 'http://localhost:1344';

describe('hello world', function() {

  describe('hello world app', function() {
    const FULL_URL = HOST_URL + '/';
    it('should greet', function() {
      browser.get(FULL_URL);
    });
  });
});

Directory structure:

├── protractor.config.js
├── test
│   └── e2e
│       └── app.ui.test.ts

Answer 1

You first need to transpile your *.ts-files before running, just like you do with your app source files.

Maybe this will help you with that.