使用type-only imports时Jest单元测试报错的解决方案求助

这是某解决方案的跟进问题。

我构建了一个包含组件和指令的Angular库，二者存在导入循环问题。

组件代码

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

@Component({
  selector: 'lib-resizable',
  templateUrl: `<div [resizableGlyph]="['top', 'start']"></div>`,
  providers: [
    { provide: 'RESIZABLE', useExisting: ResizableComponent }
  ]
})
export class ResizableComponent {}

指令代码

import { Directive, Inject, Input } from '@angular/core';
// import { ResizableComponent } from '../resizable/resizable.component'; // 项目无法构建（npm run build -- --configuration production）
import type { ResizableComponent } from '../resizable/resizable.component'; // 单元测试无法运行
export type Position = 'top' | 'end' | 'bottom' | 'start';

@Directive({ selector: '[resizableGlyph]' })
export class ResizableGlyphDirective {
  constructor(@Inject('RESIZABLE') private resizable: ResizableComponent) { }
  @Input('resizableGlyph') positions: Position[] = [];
}

为解决导入循环问题，我使用了import type语法，但这导致Jest单元测试抛出以下错误：

ReferenceError: ResizableComponent is not defined

我已尝试以下方案但未解决问题：

• 修改tsconfig的includes配置
• 使用jest-preset-angular 13.0.1版本
• 设置"emitDecoratorMetadata": false
• 参考Jest无法识别"import type"的相关解决方案

我已准备好最小复现项目，请问有人成功使用type-only imports且正常运行单元测试吗？

参考资料 #

• 在Angular工作区中添加Jest
• Angular NG3003错误
• Type-only导入/导出

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