Typescript, left untranspiled in Karma test runs

I am attempting to conduct karma tests against Typescript. I have successfully installed karma and can run tests, but encounter Syntax Errors when my *.ts files contain Typescript syntax like this:

Error: (SystemJS) SyntaxError: Unexpected token )

It seems that my TS files are not being transpiled. The tests run smoothly with pure JS syntax.

Below is an excerpt from my karma.conf.js file:

module.exports = function(config) {
    config.set({
        frameworks: ['systemjs', 'jasmine'],
        systemjs: {
            configFile: 'karma.system.conf.js',
            config: {
                paths: {
                    'es6-module-loader': 'src/node_modules/es6-module-loader/dist/es6-module-loader.js',
                    jasmine: 'src/node_modules/jasmine-core/lib/jasmine-core.js',
                    systemjs: 'src/node_modules/systemjs/dist/system.js',
                    'system-polyfills': 'src/node_modules/systemjs/dist/system-polyfills.js',
                    typescript: 'src/node_modules/typescript/lib/typescript.js',
                    'plugin-typescript': 'src/node_modules/plugin-typescript/lib/plugin.js'
                },
                transpiler: 'plugin-typescript'
                //transpiler: 'typescript' //I've tried both - same result
            },

            serveFiles: [
                'src/**/*.js',
                'src/**/*.ts'
            ]
        },
        files: [
            'test/*.ts'
        ],
        exclude: [
            'test/*.SKIP.ts'
        ]
    });
};

Your assistance is greatly appreciated!

typescriptkarma-jasminesystemjs

Answer №1

Below is the configuration that I have successfully implemented.

karma.config.js:

/****** karma.config.js ******/
module.exports = function(config) {
    config.set({
        //logLevel: 'DEBUG',
        urlRoot: '/',
        frameworks: ['systemjs', 'jasmine'],

        plugins: [
            'es6-module-loader',
            'karma-systemjs',
            'karma-jasmine',
        ],
        systemjs: {
            configFile: './karma.system.conf.js',
            config: {
                baseURL: './'
            },
            // Patterns for files that you want Karma to make available, but not loaded until a module requests them. eg. Third-party libraries.
            serveFiles: [
                //'apps/**/*.js',
                //'src/**/*.ts'
            ]

            // SystemJS configuration specifically for tests, added after your config file.
            // Good for adding test libraries and mock modules
            // config: {
            //     paths: {
            //         'angular-mocks': 'bower_components/angular-mocks/angular-mocks.js'
            //     }
            // }
        },
        files: [
            'test/unit/*.ts',
            'test/unit/*.js',
        ],
        exclude: [
            'test/unit/*.SKIP.ts'
        ]
    });
};

karma.system.config.js

/****** karma.system.config.js ******/
System.config({

    paths: {
        'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js',
        'jasmine': 'node_modules/karma-jasmine/*',
        systemjs: 'node_modules/systemjs/dist/system.js',
        typescript: 'node_modules/typescript/lib/typescript.js',
        'plugin-typescript': 'node_modules/plugin-typescript/lib/plugin.js'
    },

    meta: {
        '*.ts': {
            format: 'es6'
        }
    },

    packages: {
        'src/apps': { defaultExtension: 'ts' }
    },

    transpiler: 'typescript',

});

Following the advice from TypeScripter proved valuable, as well as including the meta information provided. Hopefully, this solution can benefit others as well.

Answer №2

I believe SystemJS is not meant to be included in your configuration files. Is there a specific reason why you have 'SystemJS:....' included in your configurations? I recommend removing that and instead, including all files under files[]. You may want to consider using a new pattern where serving and watching can be done in a more streamlined way.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the button is clicked, (ngSubmit) will be triggered

In my Angular2 Form Component, I have implemented two buttons with different functionalities. Button Submit: This button submits all the values to the API. Button Add: This button adds an object to an array. Here are the two methods: onSubmit() { this. ...

angulartypescript

Pass information from a child component to a parent component within a React.js application

Using the Semantic-UI CSS Framework, I have implemented a dropdown menu and want to be able to select an item from it and identify which item has been selected. While I can determine the selected item within the child component and set its state, I am faci ...

javascriptreactjstypescript

Using the `ngrx` library to perform an entity upsert operation with the

I am facing a certain challenge in my code. I have an action defined as follows: export const updateSuccess = createAction('Success', props<{ someId: string }>()); In the reducer, I have an adapter set up like this: export const adapter: ...

angulartypescriptngrxngrx-entity

I am encountering an issue where Typescript paths specified in the tsConfig.app.json file are not resolving properly

I have defined path settings in my tsconfig.app.json file like this: "paths": { "@app/core": ["./src/app/core"] } Every time I run a test that includes import statements with relative paths, it throws the following error: ...

typescriptjestjsangular9ts-jest

Top Recommendations: Comparing Standalone Components and Modules in Angular Version 14

I'm in need of some clarification on the most effective practices when it comes to utilizing standalone components and modules within Angular 14. With the introduction of standalone components as a new concept in Angular, I am seeking factual guidance ...

angulartypescriptcomponentsangular-module

Issue: Interface not properly implemented by the service

I have created an interface for my angular service implementation. One of the methods in the service returns an observable array, and I am trying to define that signature in the interface. Here's what I have so far: import {Observable} from 'rxj ...

typescript

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Seeking assistance with adding a new function that allows users to navigate to the next searched result. Big thanks to @ggorlen for aiding in the recursive search. https://i.stack.imgur.com/OsZOh.png I have a recursive search method that marks the first ...

javascriptarraysangulartypescript

Guide on extracting just the key and its value from a Filter expression in a DynamoDB Query using Typescript

Presented here is a filter expression and Key Condition. The specific set of conditions are as follows: {"Age":{"eq":3},"Sex":{"eq":"MALE"}} const params: QueryCommandInput = { TableName: my_tab ...

typescriptamazon-dynamodb

Click function for mat-step event handler

Is it feasible to create a click event for the mat-step button? I want to be able to add a (click) event for each mat-step button that triggers a method. Essentially, I am looking to make the mat-step button function like a regular button. You can find mo ...

angulartypescriptangular-material

Strange occurrences observed while looping through an enum in TypeScript

Just now, I came across this issue while attempting to loop through an enum. Imagine you have the following: enum Gender { Male = 1, Female = 2 } If you write: for (let gender in Gender) { console.log(gender) } You will notice that it iter ...

javascripttypescript

Enhancing collaboration: Seamlessly sharing interface/interface/model files in the integration of

Currently, I am engrossed in developing an application with an Express backend and Typescript whilst utilizing Angular for the frontend. The only snag I'm facing is that I require interface/models files from the backend to be accessible on the fronten ...

angulartypescriptexpress

Obtain the specific generic type that is employed to broaden the scope of a

I am working on a class that involves generics: abstract class Base<P extends SomeType = SomeType> { // ... } In addition, there is a subclass that inherits from it: class A extends Base<SomeTypeA> { // ... } I'm trying to figure out ...

typescript

What could be the reason for `process.env.myvariable` not functioning in a Next.js project with TypeScript

After creating a file called .env.local in the root directory of my project, I added a variable called WEBSOCKET_VARIABLE=THIS_IS_TEXT to it. However, when I try to access it using process.env.WEBSOCKET_VARIABLE, nothing is found. What could be causing ...

typescriptnext.js

Error encountered: The property 'localStorage' is not found on the 'Global' type

Calling all Typescript enthusiasts! I need help with this code snippet: import * as appSettings from 'application-settings'; try { // shim the 'localStorage' API with application settings module global.localStorage = { ...

typescriptnativescript

What is the best way to verify the type of an object received from request.body in Typescript

Is it possible to check the object type from the request body and then execute the appropriate function based on this type? I have attempted to do so in the following manner: export interface SomeBodyType { id: string, name: string, [etc....] } ...

javascripttypescriptif-statementtypes

The category 'Moment' cannot be assigned to the category 'Date'. The characteristic 'toDateString' is not present in the category 'Moment'

I recently integrated moment into my Angular2 application, and encountered an issue when attempting to assign the date of this week's Saturday to a variable of type date, case "weekend": this.fromDate = moment().startOf('week ...

angulartypescriptmomentjs

What is the best way to structure a nested object model in Angular?

Issue occurred when trying to assign the this.model.teamMembersDto.roleDto to teamMembersDto. The error message states that the property roleDto does not exist on type TeamMembersDropdownDto[], even though it is nested under teamMembersDto. If you look at ...

javascriptangulartypescript

What is the best way to send information to a child component that has been navigated from a parent component

When navigating to a child component from the parent component's HTML template using a button, how can I pass the parent component's data (such as a name) to the child component without displaying it in the URL? ...

angulartypescriptangular-ui-router

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

In TypeScript, there is a unique feature available for defining properties with values using the `value` keyword. class Test { constructor(private value: number = 123) { } public MyValueProperty: number = 5; } Here is how you can define such ...

javascripttypescript

The 'target' property is not found on the type 'KeyboardEventHandler<HTMLInputElement>'

My Visual Studio Code is giving me an error in my onKeyUp function when I try to access the input target and retrieve its value. import React from 'react'; import styles from './styles.module.scss'; export function Step3() { ...

typescriptnext.js