Search code examples
angulartestingjestjscypresscypress-component-test-runner

Getting this.input.charCodeAt is not a function when mounting components in test bed for Angular 13


We are performing cypress component test for angular components. While doing this process we created cy-spec file and mounted the components. While mounting the components we get the error this.input.charCodeAt is not a function

We are using cypress-angular-unit-test for the component tests.

button.component.html

<button class="nexus-btn">Click me!</button>

button.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html'
})
export class ButtonComponent {

}

button.component.cy-spec.ts

/// <reference types="cypress" />
import { setConfig, initEnv, mount } from 'cypress-angular-unit-test';
import { ButtonComponent } from './button.component';
import { ComponentFixture } from '@angular/core/testing';
import { NxsAngularModule } from '@nxs/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import {Locators} from './button.component.const'
import {DESKTOP, TAB_LANDSCAPE, TAB_PORTRAIT, MOBILE} from '../../constants'


describe('AppComponent', () => {
  let fixture: ComponentFixture<ButtonComponent>;

  beforeEach(() => {
    setConfig({
      stylesheet: 'src/styles.css'
    });
  });

  it('should create', () => {
    initEnv(ButtonComponent, {
      imports: [NxsAngularModule, BrowserAnimationsModule],
    });

    const fixture = mount(ButtonComponent);
    fixture.detectChanges();
  });

});

Solution

  • In the package.json try to update the raw-loader version to 1.0.0. This is the compatible version for angular-cypress integration

    "raw-loader": "1.0.0",