Angular：使用 Speedy Web 编译器 (SWC) 进行 TestBed 测试时，组件未解析

Question

我的 Nx Angular 10 存储库中的测试运行速度非常慢，所以我决定从使用 jest-ts 切换到 @swc/jest。

开玩笑.presets.ts

const nxPreset = require('@nrwl/jest/preset');
module.exports = {
  ...nxPreset,
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'html', 'js', 'json'],
  testEnvironment: 'jsdom',
  transform: {
    ['.+\\.js$']: 'babel-jest',
    '^.+\\.(ts|html)$': '@swc/jest',
  },
}

.swcrc文件

{
    "jsc": {
      "target": "es2020",
      "parser": {
        "tsx": false,
        "syntax": "typescript",
        "dynamicImport": true,
        "privateMethod": false,
        "functionBind": true,
        "exportDefaultFrom": true,
        "exportNamespaceFrom": true,
        "decorators": true,
        "topLevelAwait": true,
        "importMeta": true
      },
      "transform": {
        "decoratorMetadata": true,
        "legacyDecorator": false,
        "optimizer": {
            "globals": {
                "vars": {
                    "__DEBUG__": "true"
                }
            }
        }
      },
      "keepClassNames": true,
      "externalHelpers": true,
      "loose": true
    },
    "minify": false,
    "module": {
      "type": "commonjs",
      "strict": true,
    "strictMode": true,
    "lazy": false,
    "noInterop": true
    },
    "sourceMaps": "inline",
    "inlineSourcesContent": true
  }

该组件是一个新制作的 Angular 组件，具有 0 个额外逻辑，失败的测试看起来像

describe('SpeedTestComponent', () => {
  let component: SpeedTestComponent;
  let fixture: ComponentFixture<SpeedTestComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SpeedTestComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SpeedTestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

当我运行测试时，它给了我这个错误

这只发生在 TestBed 测试中。

理想的行为是通过测试。

包裹

"@swc/core": "^1.2.152",
"@swc/helpers": "^0.3.6",
"@swc/jest": "^0.2.20",
"jest": "^26.2.2",

Answer 1

Angular 不直接使用 SWC 或 TS 编译。 这可能是问题的原因。 这是我们开始@nxext/angular-swc 工作的方式