'Angular: Component is not resolved when using Speedy Web Compiler (SWC) for TestBed tests
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",
Solution 1:[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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Jordan Hall |