Issue with Source-Mapping in Debug Mode with TypeScript on WebStorm

Running a Jest test in Debug Mode from WebStorm for my TypeScript test suit and class under test in a node project. When setting a breakpoint in the test, it stops as expected. However, when trying to step into the class under test, the debugger jumps to the last line of its .ts file. The line numbers do not align with the ts-file, indicating that the source-mapping is failing for the class under test.

Q: How can I resolve the source-mapping issue?

The project structure is as follows:

project-root
  /projects/my-node-project/src
      /services         //production code resides here
      /specs            //test suits located here

https://i.sstatic.net/D4M07.png

typescriptdebuggingjestjswebstormsource-maps

Answer №1

Make sure to review your jest.config.js file - how is it set up? Have you enabled the collectCoverage option in it? If the original file has been modified for coverage tracking, the resulting code might not align correctly with the source; this is a common constraint (and not exclusive to WebStorm, by the way).

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

Leveraging imported libraries from a parent class is a common practice in Angular

"angular2": "2.0.0-beta.17", How can I import { Http, Response } from 'angular2/http'; in my Base class and use http in the child classes? Is there a way to achieve this? P.S. I'm open to hacks, workarounds, and unconventional solutions. ...

typescriptangular

Encountering a "is not a function" error in NextJS while attempting to import a custom hook

Exploring the world of NextJS, I am embarked on creating a responsive website starting with a navigation bar component. The goal is to ensure that it adapts seamlessly to different viewport dimensions. Let me walk you through my current folder structure: h ...

reactjstypescriptvisual-studio-codenext.js

Purifying potentially harmful style value for background-image when using ngStyle with a conditional statement

I'm attempting to dynamically display a background image of a div using ngStyle. I have also set a fallback image in case the default value is null. <div class="card-img-top" [ngStyle]="{'background-image': process.thumbna ...

cssangulartypescriptbackground-imagehtml-sanitizing

When I try to install dependencies with Hardhat, the "Typechain" folder does not appear in the directory

After installing all the dependencies, I noticed that the "typechain" folder was missing in the typescript hardhat. How can I retrieve it? Try running npm init Then, do npm install --save-dev hardhat Next, run npx hardaht You should see an option to se ...

javascripttypescriptdependenciessolidityhardhat

Ways to check if styles are being dynamically implemented within a React component

I have developed a React component named Button: import PropTypes from 'prop-types' import Radium from 'radium' import React from 'react' import { Icon } from 'components' import { COLOURS, GLOBAL_STYLES, ICONS, MEA ...

reactjsjestjsenzymeradium

Creating a function in Typescript to extend a generic builder type with new methods

Looking to address the warnings associated with buildChainableHTML. Check out this TS Playground Link Is there a way to both: a) Address the language server's concerns without resorting to workarounds (such as !,as, ?)? b) Dodge using type HTMLChain ...

typescripttypescript-generics

Is there a more effective way to implement a Custom Validator using .forEach?

I have developed my own validation class as a learning exercise. Do you think this is an effective approach, or do you have suggestions for improvement? import { AbstractControl } from '@angular/forms'; export class ProjectNameValidator { pr ...

angulartypescript

Preventing JavaScript Compilation for a Specific Folder using tsconfig: A Step-by-Step Guide

To create my own npx package, I'm currently working on converting my .ts files into .js. The purpose of the application is to generate TypeScript templates for users based on their selected options. In this app, there's a CLI called 'index.t ...

typescripttsconfigtsc

struggling to access the value of [(ngModel)] within Angular 6 component

When working in an HTML file, I am using ngModel to retrieve a value that I want to utilize in my component. edit-customer.component.html <input id="userInfoEmail" type="text" class="form-control" value="{{userInfo.email}}" [(ngModel)]="userInfo.email ...

angulartypescriptangular6primengangular-ngmodel

Tips for correctly setting object initial values in React CreateContext

How can I correctly define the initial value of the constance trainsDetails in React Create Context? The trainsDetails is an object with various properties, fetched as a single object from an endpoint and has the values specified below in the TrainsDetails ...

reactjstypescriptreact-context

When Selenium in JavaScript cannot locate a button element, use `console.log("text")` instead

I am trying to capture the error when there is no button element available by using console.log("No element"). However, my code is not working as expected. const {Builder, By} = require("selenium-webdriver"); let driver = new Builder().forBrowser("chrome ...

javascriptnode.jsseleniumdebuggingsetinterval

What is the best way to create a new array from scratch while utilizing a typescript alias?

When declaring a type alias, I encountered an issue where I could not initialize it without creating an item: type ModelState = [string, string[]]; const modelState: ModelState = [null,[]]; modelState["firstName"] = ["First name is required."]; If I try ...

typescript

Could there be a more effective approach to managing interfaces and eliminating 'TypeErrors'?

I'm encountering a TypeError issue in my ReactJS project. The error message states: Server Error: TypeError: Cannot read properties of undefined (reading 'phoneNumber') ------------------------------------------------------------------------ ...

reactjstypescripttypeerrorreact-props

Understanding Typescript typings and npm packages can greatly improve your development workflow

I'm pleased to see that NPM has now included support for importing TypeScript type wrappers. However, I've noticed inconsistency in how these wrappers are maintained. For instance, when attempting to import "node-git" and "@types/node-git", I fou ...

typescriptnpmdefinitelytyped

What is the best way to initialize an array with values in a Typescript constructor?

I've attempted the following: class PhraseService phrasePosShortNames: [{ id: number, name: string }]; phrasePosNames = [ { id: 0, longName: '#', shortName: '#' }, ...

typescript

Is it possible to retrieve a value obtained through Request.Form?

Within my Frontend, I am passing an Object with a PersonId and a FormData object. const formData = new FormData(); for (let file of files){ formData.append(file.name, file,); } formData.append('currentId',this.UserId.toString()); const upl ...

c#visual-studiotypescriptform-data

Which one should I prioritize learning first - AngularJS or Laravel?

As a novice web developer, I am embarking on my first journey into the world of frameworks. After much consideration, I have narrowed it down to two options: AngularJS and Laravel. Can you offer any advice on which one would be best for me to start with? ...

javascriptphpangularjslaraveltypescript

Identifying the presence of a debugger and determining if it is actively stepping through code

I am familiar with the Debugger class in the System.Diagnostics namespace, specifically the IsAttached property. Is there a way to determine if we are actively stepping through code rather than just being attached? While I acknowledge that this may be a c ...

c#.netdebuggingvisual-studio-debugging

Tweaking the column name and data values within a mat table

Exploring Angular and currently using Angular CLI version 8.1.0. I have two APIs, as shown below: For bank details: [ { "strAccountHolderName": "Sarika Gurav", "strAccountNumber": "21563245632114531", "ban ...

angulartypescript

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Seeking the optimal solution for creating PDF templates using Angular and .NET 6? Specifically looking to design templates that heavily feature tables. In my exploration of efficient PDF template creation with Angular and .NET 6, I ventured into using pdf ...

javascriptnode.jsangulartypescriptpdfmake