Doesn't seem to work with ES Modules

[markcellus]

Hey,

It appears that the package does not work with ES modules using the <script type="module"> syntax. Take this test file for instance:

// tests/my-component-tests.ts
import chai from '../node_modules/@bundled-es-modules/chai/chai.js';

describe('My Component', () => {
    it('has correct innerHTML contents', () => {
        const component = document.createElement('button');
        document.body.appendChild(component);
        chai.assert.equal(component.innerHTML, '');
        component.remove();
    });
});

running it gives me this error:

> karma start karma.conf.js

07 07 2019 16:08:59.100:INFO [compiler.karma-typescript]: Compiling project using Typescript 3.5.2
07 07 2019 16:09:00.873:INFO [compiler.karma-typescript]: Compiled 2 files in 1742 ms.
Failed to parse file: /home/mark/code/karma-web-components/tests/my-component-tests.ts
07 07 2019 16:09:01.512:ERROR [preprocessor.coverage]: Line 1: Unexpected token
  at /home/mark/code/karma-web-components/tests/my-component-tests.ts
Failed to parse file: /home/mark/code/karma-web-components/src/my-component.ts
07 07 2019 16:09:01.513:ERROR [preprocessor.coverage]: Line 1: Unexpected token
  at /home/mark/code/karma-web-components/src/my-component.ts
07 07 2019 16:09:01.514:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
07 07 2019 16:09:01.514:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
07 07 2019 16:09:01.517:INFO [launcher]: Starting browser ChromeHeadless
07 07 2019 16:09:01.873:INFO [HeadlessChrome 75.0.3770 (Linux 0.0.0)]: Connected on socket UQPPoO2yTs8Me8rhAAAA with id 21093032
HeadlessChrome 75.0.3770 (Linux 0.0.0) ERROR
  Uncaught SyntaxError: Unexpected number
  at tests/my-component-tests.ts:1 <- tests/my-component-tests.js:1:6
  
  SyntaxError: Unexpected number


npm ERR! Test failed.  See above for more details.

Here is my karma config:

Karma configuration

// karma.conf.js
module.exports = function(config) {
    config.set({
        files: [{ pattern: 'tests/**/*.ts', type: 'module' }, { pattern: 'src/**/*.ts', type: 'module' }],
        preprocessors: {
            '**/*.ts': ['karma-typescript']
        },
        karmaTypescriptConfig: {
            compilerOptions: {
                emitDecoratorMetadata: true,
                module: 'esnext',
                sourceMap: true,
                target: 'esnext'
            },
            exclude: ['node_modules']
        },
        reporters: ['progress', 'karma-typescript'],
        frameworks: ['mocha', 'karma-typescript'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        browsers: ['ChromeHeadless'],
        autoWatch: true,
        singleRun: true,
        concurrency: Infinity
    });
};

[erikbarke]

Have you tried using the karma-typescript-es6-transform?

[markcellus]

I havent but why would I need that package for contents of has correct innerHTML contents test? That same code works in latest Chrome browser without karma.

[rdefinis]

commonjs may be ok, but if module is es6 or es2015 does not seem to work...

An error was thrown in afterAll
Uncaught SyntaxError: Unexpected token 'export'

[melink14]

Is there any path to native ES module support for karma-typescript?

[jamesjsewell]

i tried switching karma-typescript-angular2-transform for karma-typescript-es6-transform in my transforms because im getting syntax errors with the karma bundle. es6-transform compiles the bundles but it doesnt run the tests, just sits there doing nothing. I tried it in combination with angular2-transform and n luck.

now trying just karma-typescript-angular2-transform with validateSyntax: false originally it was complaining about imports needing to be at the top of the file, now im looking in the bundle at the line where the syntax error is and inside of one of the global wrappers there are some imports that use object destructuring, i guess the angular2-transform isnt es6 compatible?

not sure what else to try

( the tests run fine when testing "dumb" angular components that don't include any services but now im trying to inject services into the component view the test bed providers and thats when the uncaught errors happen )