Angular集成tesseract.js测试遇TS2591及组件识别问题求助

问题1：Tesseract.js类型错误（Buffer找不到） #

执行Angular测试时出现以下TypeScript错误：

Error: node_modules/tesseract.js/src/index.d.ts:160:60 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig. 160     | CanvasRenderingContext2D | File | Blob | ImageData | Buffer | OffscreenCanvas;

问题2：添加@types/node后组件无法识别 #

尝试安装@types/node并修改tsconfig.spec.json添加types:["node"]后，测试出现组件未识别错误：

Chrome 123.0.0.0 (Mac OS 10.15.7) AppComponent should render title FAILED
    Error: NG0304: 'lp-header' is not a known element (used in the 'AppComponent' component template):
    1. If 'lp-header' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
    2. If 'lp-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

测试代码如下：

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(() =>
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
    })
  );

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('.content span')?.textContent).toContain(
      'logan-gwa-calculator app is running!'
    );
  });
});

搞定Buffer类型错误 #

1. 先装对依赖，得装开发依赖版的@types/node：

   npm install --save-dev @types/node
   

2. 改tsconfig.spec.json的时候别直接替换types数组，在原有基础上加node，还要把node加到compilerOptions.lib里——因为Angular测试默认是浏览器环境，得补全Node的类型支持：

   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "outDir": "./out-tsc/spec",
       "types": [
         "jasmine",
         "node"  // 添加这一行
       ],
       "lib": [
         "ES2020",
         "dom",
         "node"  // 添加这一行
       ]
     },
     "include": [
       "src/**/*.spec.ts",
       "src/**/*.d.ts"
     ]
   }
   

3. 要是还报错，就在tsconfig.json的compilerOptions里加这俩配置：allowSyntheticDefaultImports: true和esModuleInterop: true，保证Node模块的类型能被正确识别。

搞定组件未识别的问题 #

lp-header是你项目里的Angular组件，测试模块里没声明也没导入，所以得做下面其中一件事：

1. 如果lp-header属于某个模块（比如HeaderModule），就在测试模块的imports里导入这个模块：

   beforeEach(() =>
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, HeaderModule], // 添加HeaderModule
       declarations: [AppComponent],
     })
   );
   

2. 如果lp-header是单独的组件，直接导入它然后加到测试模块的declarations里：

   import { LpHeaderComponent } from './path-to/lp-header.component'; // 先导入组件
   
   beforeEach(() =>
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [AppComponent, LpHeaderComponent], // 添加组件声明
     })
   );
   

3. 临时凑合用的办法（不推荐长期用）：要是只想跳过检查，就把CUSTOM_ELEMENTS_SCHEMA加到测试模块的schemas里，但这会关掉Angular的组件验证，可能藏其他问题：

   import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
   
   beforeEach(() =>
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [AppComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA] // 添加这一行
     })
   );
   

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