Troubleshooting: Angular component resolution issue with Speedy Web Compiler (SWC) in TestBed tests

I've been experiencing slow test runs in my Nx Angular 10 repository, so I made the decision 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",
      .
      .
      .

The component is a brand new Angular component with no additional logic, and the failing test looks like this:

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

Upon running the test, it throws the following error https://i.sstatic.net/d2Cmc.png

This issue only arises with TestBed tests.

The expected behavior is for the test to pass.

packages

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

Answer №1

The compilation process for Angular does not involve SWC or TS directly, which may be why you're experiencing an issue. That's why we have begun working on @nxext/angular-swc.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring information between components utilizing a service obtained from an external API server

When working with an API server to retrieve data for multiple components, a common issue arises where the components start processing before the data is actually retrieved. One solution is to use a service to share the data, but this can lead to delays for ...

angularangular2-observables

information received from the socket is not displaying on the screen

I am receiving data from socket io but it is not displaying in the view. Here is the function in my TypeScript file: socketIO.on('hello', (data) => { console.log('data', data); this.mydata= data; ...

angularnativescript

What is the best way to remove unnecessary scrollbars from a material dialog that includes a radio-group?

Check out this Stackblitz demo that showcases a dialog with a radio group inside the mat-dialog-content div. Notice how the dialog-content displays an unsightly scrollbar: https://i.sstatic.net/gvqlH.png This issue doesn't occur with other compon ...

cssangularangular-material

Show or hide a div based on the visibility of another div in Angular using *ngIf

Looking for a way to dynamically display images based on the visibility of another image? Consider the code snippet below: <div *ngFor="let badge of user.progress.unlockedBadges"> <img id="{{i}}_unlockedImage" *ngIf="badge == achievemen ...

htmlangular

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

When I directly call the Spring Boot API in the browser, it successfully creates and downloads a PDF report. However, when I try to make the same GET request from Angular 6, I encounter the following error: Here is the code snippet for the Spring Boot (Ja ...

javascriptangulartypescriptangular-httpclient

Setting up a Typescript class for seamless use in both Browser and Node applications

I developed a web app consisting of two separate projects, each housed in different folders with their own set of unique files. The client component is built using Angular 2 (RC-4) with SystemJS Typescript 1.8.10 (as per instructions found here). The serv ...

typescriptmodule

Having trouble getting the Angular 2 quickstart demo to function properly?

Just starting out with Angular 2, I decided to kick things off by downloading the Quickstart project from the official website. However, upon running it, I encountered the following error in the console: GET http://localhost:3000/node_modules/@angular/ ...

javascriptangulartypescriptsystemjs

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Recently, I've been working on an Angular project where I successfully integrated a bottom sheet from Angular Material. However, I encountered an issue when trying to make the opened popup sticky to the bottom and responsive to its position, but unfor ...

cssangularsassangular-material

Limit the typescript generic type to only a singular string literal value, preventing the use of unions

Within my project, I have introduced a generic entity type that utilizes a generic to determine a field type based on a specific set of string literals: type EntityTypes = 'foo' | 'bar' | 'baz'; type EntityMappings = { foo: ...

typescripttypescript-generics

Combining Objects within an Array in JavaScript When Certain Conditions Are Satisfied

In my scenario, I am seeking assistance with merging the values of objects in an array if the id matches the warehouse_item_id. Specifically, there are two objects that need to be merged: id 191 and id 52 because id 52 has a warehouse_item_id of 191. Ple ...

javascriptarraystypescriptarray-filter

Issue encountered: Cannot locate module: Error message - Unable to find 'stream' in 'C:devjszip-test ode_modulesjsziplib' folder

I am encountering an issue in my angular 7 application while using jszip v3.2.1. During the project build process (e.g., running npm start), I receive the following error message: ERROR in ./node_modules/jszip/lib/readable-stream-browser.js Module not fo ...

javascriptangulartypescriptnpmjszip

What is the approach taken by Angular when it comes to managing dependency injection for a variety

In my project, I've designed an abstract class that serves as a foundation service for my other two services. Below is the snippet of code for this abstract class: import { Injectable } from '@angular/core'; export interface Book { title ...

angulardependency-injectionserviceautowired

Harnessing the power of React context alongside React hooks in TypeScript

Here is an example demonstrating my attempt at implementing react's context with react hooks. The goal is to easily access context from any child component using the code snippet below: const {authState, authActions} = useContext(AuthCtx); First, I ...

reactjstypescriptreact-contextreact-hooks

"Exploring the versatility of ng-content in Angular 6: A comprehensive guide on

After diving into Angular recently, I decided to tackle creating a menu system in Angular 6. Here is the breakdown of my folder structure: https://i.sstatic.net/QCXP8.png Starting with my app.module.ts: import { BrowserModule, } from '@angular/plat ...

angularangular6angular-routertransclusion

Unlocking the value of the "input" field within an EventListener function in Angular directly from the DOM

In my "characters" module, there is a form with a text field and a button. When the button is clicked, it triggers a function but I am struggling to retrieve the current input text and pass it to the async function. HTML: https://i.sstatic.net/DMF8w.png ...

javascriptangulartypescript

Exploring Angular: How to access ViewChild from a dynamically loaded component

One of my components includes a ViewChild element like this: @ViewChild('overView') content: ElementRef; I am dynamically loading this component in the following way: let overviewComponent = this.vcr.createComponent(OverviewComponent); let conte ...

angularviewchild

Error encountered during Ionic iOS build caused by google-plus plugin

Seeking solution for the error below, unsure where to begin. While attempting to compile my Ionic project for iOS, encountering the following issue: $ ionic cordova build ios .... /Plugins/cordova-plugin-googleplus/GooglePlus.h:2:9: fatal error: 'Goog ...

iosangularcordovaionic-frameworkgoogle-plus-signin

What is the reason for not hashing the password in this system?

My password hashing code using Argon2 is shown below: import { ForbiddenException, Injectable } from '@nestjs/common'; import { PrismaService } from 'src/prisma/prisma.service'; import { AuthDto } from './dto'; import * as arg ...

node.jstypescriptnestjspassword-hashargon

Issue with accessing storage in Ionic Storage (Angular)

Currently, I am attempting to utilize Ionic storage for the purpose of saving and loading an authentication token that is necessary for accessing the backend API in my application. However, I am encountering difficulties retrieving the value from storage. ...

angulartypescriptionic-frameworkionic-storage

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

htmljsonangulartypescriptapi