Angular: Component is not resolved when using Speedy Web Compiler (SWC) for TestBed tests

Question

The tests in my Nx Angular 10 repo have been running very slow so I decided to switch from using jest-ts to @swc/jest.

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
  }

The component is a freshly made Angular component with 0 extra logic, the test that fails looks like

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();
  });
});

When I run the test it gives me this error

This only happens for TestBed tests.

The ideal behaviour is for the test to past.

packages

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

Answer 1

Angular doesn't directly compile using SWC or TS. This is likely the cause of the issue. It's way we started work on @nxext/angular-swc