Angular 13测试台挂载组件报this.input.charCodeAt is not a function错误

DevOps 小满

2026-9-3

报错根因

this.input.charCodeAt is not a function 是Angular内置HtmlParser抛出的类型错误：解析模板时HtmlParser会先调用charCodeAt(0)判断模板首字符格式，该方法仅存在于字符串原型上，一旦传入的待解析内容不是字符串（对象、undefined、null、数字等）就会直接抛出这个错误。结合你贴的代码，触发原因按出现概率从高到低排列：

cypress-angular-unit-test版本与项目Angular版本不匹配。这个第三方库对Angular大版本耦合度极高，跨大版本使用时无法正确读取templateUrl对应的模板文件内容，会把文件加载结果（甚至undefined）直接传给HtmlParser，是这个报错最常见的诱因。
测试模块初始化逻辑不规范。你在it用例块内部调用initEnv，不符合工具要求的“每个用例执行前初始化测试环境”的设计，容易出现测试模块元数据污染、模板缓存错乱的问题，偶发导致解析参数异常。另外你代码中导入了CUSTOM_ELEMENTS_SCHEMA但没有传入测试模块配置，若导入的NxsAngularModule包含自定义元素，编译器解析节点时会拿到非预期的节点定义。
静态资源路径配置错误。setConfig中声明的全局样式路径如果无效，工具加载样式时会拿到非字符串的响应内容，后续传给解析器时也会触发同类错误。
第三方模块导入方式错误。如果NxsAngularModule需要通过forRoot()传入配置才能正常使用，直接导入模块类会导致模块内部元数据缺失，间接引发模板解析异常。

排查修复步骤

按顺序操作即可定位解决问题：

对齐依赖版本
先查看项目package.json中Angular的大版本，匹配对应依赖：
- Angular 10~12 使用 cypress-angular-unit-test@3.x
- Angular 13~14 使用 cypress-angular-unit-test@4.x
- Angular 15及以上版本直接弃用停止维护的cypress-angular-unit-test，替换为Cypress官方维护的@cypress/angular包，从根源避免版本兼容问题。

修正测试初始化逻辑
将initEnv挪到beforeEach钩子中执行，补全缺失的schemas配置，修复变量遮蔽问题，修正后的测试代码参考：

/// <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('ButtonComponent', () => {
  let fixture: ComponentFixture<ButtonComponent>;

  beforeEach(() => {
    setConfig({
      stylesheet: 'src/styles.css'
    });
    initEnv(ButtonComponent, {
      imports: [NxsAngularModule, BrowserAnimationsModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    });
  });

  it('should create', () => {
    fixture = mount(ButtonComponent);
    fixture.detectChanges();
    cy.get('.nexus-btn').should('contain.text', 'Click me!');
  });
});

校验静态资源路径
临时注释掉setConfig中的stylesheet配置，运行测试如果报错消失，说明src/styles.css路径配置错误，对照Cypress配置文件中的项目根目录修正路径即可。
排查第三方模块问题
临时移除imports数组中的NxsAngularModule运行测试，如果报错消失，检查该模块是否需要调用forRoot()传入初始化配置后再导入，若模块包含自定义未声明组件，也可以通过CUSTOM_ELEMENTS_SCHEMA跳过该类节点的解析校验。

额外提示：你当前代码中describe块的描述写为AppComponent，和实际测试的ButtonComponent不匹配，虽然不会直接触发本次报错，但建议修正避免后续测试元数据混淆。

内容的提问来源于stack exchange，提问作者Varad