The compatibility issues between Karma and Jasmine testing configurations cause errors during the Ionic packaging process

I've recently added testing to my ionic app using karma + jasmine, along with a typescript pre-processor. Below are the dependencies I have, most of which were added specifically for testing:

"devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "typescript": "2.0.9"

    "@types/core-js": "^0.9.35",
    "@types/jasmine": "^2.5.41",
    "angular-cli": "^1.0.0-beta.26",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-jasmine": "^1.1.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-typescript": "^2.1.6",
    "reflect-metadata": "^0.1.9",
  },

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

This is my karma.conf.js file:

module.exports = function(config) {
  config.set({

    basePath: '',
    frameworks: ["jasmine", "karma-typescript"],
    files: [
      {pattern: "src/**/*.spec.ts"},
      {pattern: "test/**/*.spec.ts"},
      {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true}
    ],

    preprocessors: {
      "**/*.ts": ["karma-typescript"], // *.tsx for React Jsx
    },

    reporters: ["progress", "karma-typescript"],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: false,

    browsers: ['Safari'],

    singleRun: true,

    concurrency: Infinity
  })
}

The Issue at Hand

While running tests using the command:

./node_modules/karma/bin/karma start karma.conf.js

Everything works fine. But when I try to run ionic serve, I encounter confusing error messages like:

  • Subsequent variable declarations must have the same type. Variable '[Symbol.unscopables]' must be of type '{ copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: ...', but here has type 'any'.

  • Typescript Error All declarations of 'name' must have identical modifiers.

  • Typescript Error Duplicate identifier 'PropertyKey'.

It seems that the devDependencies are causing issues with the application's load path. I'm now looking for a solution to get my app back up and running smoothly again.

angulartypescriptionic-frameworkjasminekarma-runner

Answer №1

The issue arises from the mixing of es2015 definitions with core-js polyfills.

Core-JS offers polyfills which can clash with TypeScript ES6+ standard definitions.

To resolve this, delete @types/core-js and include 

karmaTypescriptConfig: { compilerOptions: { lib: ['dom', 'es2015'] } }
in your karma.conf.js file to ensure Karma-Typescript uses es2015 definitions.

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

Is it possible to use the Optimistic Hook with boolean values?

I am facing an issue with a switch component where the checked value is updated only after refetching the data when the user is changed to an admin status. Currently, there is a delay when clicking the switch as it takes time to load and then updates. It ...

reactjstypescriptreact-hooks

Simplify rootscope in the ionic framework

Hey, I'm currently working on implementing a login feature for my Ionic app. I am using $rootScope as a global variable across all controllers (LoginCtrl, SalirCtrl) to store user information when they log in and display it in the SalirCtrl. However, ...

angularjsauthenticationscopeionic-frameworkrootscope

Dealing with Array Splicing Issues in Angular

Being fairly new to the world of AngularJS, I suspect that I am just making a simple mistake. My goal is to splice the cardTypes array at the var newCard = cardTypes.shift(); line rather than using .shift() so that I can consider my ng-repeat index. Whil ...

javascriptarraysangularjsionic-framework

I am facing difficulties in retrieving data from MongoDB using Angular 8

Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...

node.jsangularmongodb

npm encountered a 401 Unauthorized error while trying to access the latest version of @angular/cli

When attempting to run the npm install -g @angular/cli command in admin mode from the command window, I encountered the error message: npm ERR! 401 Unauthorized: @angular/cli@latest A colleague of mine did not face any issues with this command, and I hav ...

angular

Is there a way to ensure a consistent return value when using exhaustive switch-case statements?

I'm facing an issue with the following code snippet: function (flavors: IceCreamFlavor): 'like'|'dislike' { switch (flavors) { case IceCreamFlavor.vanilla: return 'dislike'; case IceCreamFl ...

typescripteslinttypescript-eslint

How to assign multiple values within nested for loops in Angular 6

I am facing an issue with my template file where I have two loops. I am attempting to bind the second value using the first loop value, but I am encountering an error. <tr *ngFor="let splitdata of mf.data"> <td *ngFor="let slitup of searchFie ...

angularangular6

What is the best method to fill a mat-select dropdown with an existing value?

I am encountering an issue with a mat-form-field that contains a dropdown of data fetched from an API. I can successfully select an option and save it to the form. However, upon returning to the dropdown or reloading the page, the saved value does not appe ...

javascriptangulardrop-down-menungformat-form-field

What are the steps to executing a function that instantiates an object?

Here is an object with filter values: const filters = ref<filterType>({ date: { value: '', }, user: { value: '', }, userId: { value: '', }, ... There is a data sending function that takes an obje ...

typescriptvue.js

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Currently, I am attempting to utilize Angular in order to retrieve data from a link upon clicking a button. As a newcomer to Angular with only 2 days experience, my knowledge is quite limited. What I aim to achieve is triggering the loading of JSON data w ...

htmlangulartypescript

The value 'var(--header-position)' cannot be assigned to type 'Position or undefined'

Description of Issue I am attempting to utilize a CSS Custom Property to customize a component within a nextjs application using TypeScript. Strangely, all CSS properties accept the CSS variables except for the position property which triggers the error b ...

reactjstypescriptnext.jstypescss-variables

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

I'm currently facing an issue with comparing 2 arrays of objects and I couldn't find a suitable method in the lodash documentation. The challenge lies in comparing objects using different keys. private parentArray: {}[] = [ { Id: 1, Name: &ap ...

javascriptangularjstypescriptlodash

I am experiencing issues with certain Tailwind CSS classes not functioning properly in my Angular 16 project

I have embarked on an exciting journey of developing an Angular 16 project integrated with the latest version of Tailwind CSS, V3. Following the official documentation, I expected everything to work seamlessly. However, I am perplexed as to why some classe ...

angulartailwind-csstailwind-3daisyuiangular16

Propagating numerical values through iterative iterations

I am currently facing an issue with passing values as props to a component using the forEach method in JavaScript. In addition to passing the existing values from an array, I also want to send another value that needs to be incremented by 1 for each iterat ...

javascriptreactjstypescript

Decoding JSON Data in Angular 2

I am facing a challenge where I have an array of JSON objects that need to be parsed into my Tournament class. The Tournament class has the following structure: export class Tournament { constructor (public id: number, public name: string, ...

arraysjsonangular

The function waitForAngularEnabled does not exist

Currently, I am conducting end-to-end tests for an Angular application. For the login process, it needs to exit the app, so here is what I am doing: browser.waitForAngularEnabled(false); //login browser.waitForAngularEnabled(true); While this approac ...

angularprotractorbrowserstackangular-e2e

leveraging the import statement in conjunction with SystemJs

Currently, I am in the process of creating a sample code using TypeScript and SystemJS for the browser. In my app.ts file: import {Person,add as test} from './testLib' In the generated app.js file (by TypeScript compiler): var testLib_1 = re ...

typescriptsystemjs

Achieving automatic checkbox selection in Angular 6 through passing a value from one component to another

My page named second.html contains the following code: <div class="col-lg-4 col-md-4 col-sm-4"> <input type="checkbox" class="checkmark" name="nond" [checked]="r=='true'" (change)="nond($event, check)"> ...

htmlangularcheckboxangular6

Angular tutorial: Changing website language with translation features

Looking to translate my existing Russian website into another language using angular localization. Any recommendations on where I can find resources or tutorials for this? ...

angularlocalization

How can I retrieve the name of a constant enum member in TypeScript as a string?

Consider the following const enum declaration: const enum Snack { Apple = 0, Banana = 1, Orange = 2, Other = 3 } Is it possible in TypeScript to retrieve the string representation of a specific member? In C#, this could be achieved with ...

typescript