TypeError: Right-hand side of 'instanceof' HTMLElement is not callable karma jasmin angular - Stack Overflow

admin管理员组

文章数量:1391947

I have an angular project that was updated recently. With it I also updated the libraries.

The project is at angular 18 There is the library primeng v18.

On this project there is Karma / Jasmine for the tests.

• jasmine-core v5
• karma v6.4

Since the updates I get some error when I run the tests. It's always the same error:

TypeError: Right-hand side of 'instanceof' is not callable
    at isElement (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@primeuix/utils/dom/index.mjs:238:51)
    at findSingle (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@primeuix/utils/dom/index.mjs:428:10)
    at ButtonDirective.createIcon (http://localhost:9876/_karma_webpack_/webpack:/node_modules/primeng/fesm2022/primeng-button.mjs:1087:35)
    at ButtonDirective.call [as ngAfterViewInit] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/primeng/fesm2022/primeng-button.mjs:1004:14)
    at callHookInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5154:14)
    at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5181:13)
    at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5135:17)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5085:9)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13852:21)
    at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13993:9)

It's something that is coming from the library primeuix that is used by primeng.

Here is the code of the library:

export default function isElement(element: unknown): element is Element {
    return typeof HTMLElement !== 'undefined' ? element instanceof HTMLElement : element !== null && typeof element === 'object' && (element as Element).nodeType === 1 && typeof (element as Element).nodeName === 'string';
}

From my understanding it's precisely this: element instanceof HTMLElement, and HTMLElement is not callable.

Here is my karma.conf.js:

// Karma configuration file, see link for more information
// .0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular' ,'viewport'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-viewport')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at .html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
        random: false,
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/project-name'),
      subdir: '.',
      reporters: [
        {type: 'html'},
        {type: 'text-summary'}
      ]
    },
    viewport: {
      breakpoints: [
        {
          name: "mobile",
          size: {
            width: 360,
            height: 800
          }
        },
        {
          name: "tablet",
          size: {
            width: 1280,
            height: 800
          }
        },
        {
          name: "screen",
          size: {
            width: 1920,
            height: 1080
          }
        }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

Here is my dependencies versions:

    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "karma-viewport": "^1.0.9",
    "jasmine-core": "~4.3.0",

Do you know why there is this error ? And how I could fix it ?

I tried:

• To migrate to jest: But there is a lot of test to fix to use jest inside all files, so for now I prefer not to use this.
• To use jsdom browser: It did not find a way to make it run.
• To define a variable (HTMLElement) globally for the test, but it did not work. And HTMLElement was already defined when I did a console log.

I have an angular project that was updated recently. With it I also updated the libraries.

The project is at angular 18 There is the library primeng v18.

On this project there is Karma / Jasmine for the tests.

• jasmine-core v5
• karma v6.4

Since the updates I get some error when I run the tests. It's always the same error:

TypeError: Right-hand side of 'instanceof' is not callable
    at isElement (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@primeuix/utils/dom/index.mjs:238:51)
    at findSingle (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@primeuix/utils/dom/index.mjs:428:10)
    at ButtonDirective.createIcon (http://localhost:9876/_karma_webpack_/webpack:/node_modules/primeng/fesm2022/primeng-button.mjs:1087:35)
    at ButtonDirective.call [as ngAfterViewInit] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/primeng/fesm2022/primeng-button.mjs:1004:14)
    at callHookInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5154:14)
    at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5181:13)
    at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5135:17)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:5085:9)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13852:21)
    at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13993:9)

It's something that is coming from the library primeuix that is used by primeng.

Here is the code of the library:

export default function isElement(element: unknown): element is Element {
    return typeof HTMLElement !== 'undefined' ? element instanceof HTMLElement : element !== null && typeof element === 'object' && (element as Element).nodeType === 1 && typeof (element as Element).nodeName === 'string';
}

From my understanding it's precisely this: element instanceof HTMLElement, and HTMLElement is not callable.

Here is my karma.conf.js:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular' ,'viewport'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-viewport')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
        random: false,
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/project-name'),
      subdir: '.',
      reporters: [
        {type: 'html'},
        {type: 'text-summary'}
      ]
    },
    viewport: {
      breakpoints: [
        {
          name: "mobile",
          size: {
            width: 360,
            height: 800
          }
        },
        {
          name: "tablet",
          size: {
            width: 1280,
            height: 800
          }
        },
        {
          name: "screen",
          size: {
            width: 1920,
            height: 1080
          }
        }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

Here is my dependencies versions:

    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "karma-viewport": "^1.0.9",
    "jasmine-core": "~4.3.0",

Do you know why there is this error ? And how I could fix it ?

I tried:

• To migrate to jest: But there is a lot of test to fix to use jest inside all files, so for now I prefer not to use this.
• To use jsdom browser: It did not find a way to make it run.
• To define a variable (HTMLElement) globally for the test, but it did not work. And HTMLElement was already defined when I did a console log.

• angular
• karma-jasmine
• primeng

Share Improve this question Follow edited Mar 14 at 13:05 Gregory Boutte asked Mar 13 at 14:36 Gregory BoutteGregory Boutte 78199 silver badges3535 bronze badges 6

• what running envs are you using in your karma setup? – Andrei Commented Mar 13 at 15:19
• Do you mean which OS ? It's ran locally on a macOS and also on github workflows on ubuntu. Both envs have the same errors. – Gregory Boutte Commented Mar 14 at 11:23
• rather what "browsers" do you use for your tests. chrome headless? because your case should work fine in usual browsers – Andrei Commented Mar 14 at 11:42
• In kama.conf.js there is this ` browsers: ['Chrome'],. Locally a chrome browser is started. And on github the command ran is ng test --browsers=ChromeHeadless --watch=false`, so it's Chrome but headless. Do you think that could be a browser version problem ? – Gregory Boutte Commented Mar 14 at 12:35
• The chrome version ran locally is Chrome 134.0.0.0 (Mac OS 10.15.7) – Gregory Boutte Commented Mar 14 at 12:42

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

Solution

I found out what was the problem. Somewhere inside a test file there was a re definition of HTMLElement , that was made by mistake.

let element = HTMLElement = fixture.nativeElement;

In previous primeng version I guess it was not using the HTMLElement so it did not cause any error. But since the update it was used and made the error appear.

Testing process

I found it by running tests by folder with a commande like this:

ng test --include='src/app/commons/components/inputs/**/*.spec.ts'

Where before the tests where failing, now when ran only the folder there was no error. So it meant that an other test was doing something that interfered with the failing tests.

To find with other test was doing that, I ran my tests that failed before, with all folder stating with on letter like this command. When it failed again I know that it was from a test that started with the letter.

ng test --include='src/app/commons/components/(a*|inputs)/**/*.spec.ts'

本文标签： TypeError Righthand side of 39instanceof39 HTMLElement is not callable karma jasmin angularStack Overflow