Explore the functionality of Typescript unit testing in debug mode with the assistance of VSCode

I'm looking to debug my Typescript spec.ts file using vs-code. Typically, I run it from the terminal like this:

npm run test:unit -- page.spec.ts

But I want to add some console.log statements for debugging. Is there a way to do this in vs-code?

When I run this npm command in the terminal, it seems to be executing a script defined in package.json:

    "test:unit": "ngcc && jest --coverage --ci --config=jest.conf.json"

So, I'm not sure how to run this in debug mode.

All the resources I've found online are either using mocha or testing in a browser, while I just want to debug simple unit tests.

If anyone has any tips or suggestions on how to achieve this, I'd greatly appreciate it.

typescriptunit-testingvisual-studio-code

Answer №1

To achieve this, I followed these steps:

   {
        "type": "node",
        "request": "launch",
        "name": " Unit Test",
        "program": "${workspaceRoot}\\node_modules\\jest\\bin\\jest.js",
        "args": [
           // "-i"
           "get-data.component.spec"
          
        ],
        "internalConsoleOptions": "openOnSessionStart",
    },

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

Angular Integration Testing - API Validation

I am currently exploring Integration Tests in Angular and trying to grasp their importance. From my understanding, these tests allow us to verify the outcome of an API call to ensure that we are getting the expected result. However, I have come across tut ...

angularunit-testingintegration-testing

Icon for TypeScript absent from npm package listings

Recently, I created a package and uploaded it to the npm repository. The package was displayed with an icon labeled "ts" on the website. https://i.stack.imgur.com/LoY1x.png The accompanying package.json showcased the inclusion of the "ts" icon - https:// ...

javascriptnode.jstypescriptnpm

Leveraging GetServerSideProps for Dynamic URL Query Parameters

While working on querying the parameter in the URL within getServerSideProps, I encountered an error where ID was undefined in the DetailThemepage function. My Next.js version is V.13 and the directory structure is app/detail/[id]/page.tsx. http://loca ...

typescriptnext.jsnext.js13

tsconfig is overlooking the specified "paths" in my Vue project configuration

Despite seeing this issue multiple times, I am facing a problem with my "paths" object not working as expected. Originally, it was set up like this: "paths": { "@/*": ["src/*"] }, I made updates to it and now it looks like ...

typescriptvuejs2tsconfig

Essential typing techniques required for manipulating data retrieved from GraphQL

My headless CMS is responsible for generating all types in my GraphQL schema. Upon querying, I receive a result that contains an array which I can manipulate. However, when attempting to use filter, map, or find methods on the returned array, an error me ...

typescriptgraphqlapolloapollo-client

I encountered an issue with my TypeScript function in Angular, as it is unable to process multiple uploaded files

I'm having trouble with my TypeScript function in Angular that is unable to read multiple uploaded files. fileUpload(event: Event) { const self = this; this.imageUploadInp = event.target as HTMLInputElement; this.imageUploadInp.addEventLis ...

angulartypescript

What is the correct way to extract results from an Array of Objects in Typescript after parsing a JSON string into a JSON object? I need help troubleshooting my code

Here is my code for extracting data from an array of objects after converting it from a JSON string to a JSON object. export class FourColumnResults { constructor(private column1: string, private column2: string, private column3: string, priv ...

javascriptarraysjsontypescript

Using Typescript in the browser with Babel and Webpack: Step-by-Step Guide

I've been exploring the use of Typescript in my browser with a specific architecture: Typescript in browser architecture However, I'm facing an issue with the import/export functionality when running this command: tsc && babel build-ts -d lib && ...

typescriptwebpackecmascript-6browserbabeljs

What is the best way to change a timestamp into a date format using Angular?

I am struggling to convert a timestamp to the date format 'dd/MM/YYYY' but keep getting a different date format in the output. I am using syncfusion spreadsheet for this task. export-electronic.component.ts updatedata(){ this.dataApi.get ...

angulartypescript

Is MongoDB still displaying results when the filter is set to false?

I am currently trying to retrieve data using specific filters. The condition is that if the timestamp falls between 08:00:00 and 16:00:00 for a particular date, it should return results. The filter for $gte than 16:00:00 is working correctly, but the $lte ...

typescriptmongodbfilter

Material-UI React Native components: Injecting Styles without Props

import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...

cssreactjstypescriptreact-nativematerial-ui

Is ts-node necessary for using TypeScript in Node.js?

Having trouble setting up a Node.js application in Visual Studio Code using TypeScript due to issues with importing modules. Initially, I created an index.ts file with the import statement -> import config from './app/config.json'; This resu ...

node.jstypescriptvisual-studio-codets-node

Tips for Implementing a Button Click Sound in Ionic 2

I've noticed that many native apps have a distinct click sound when buttons are pressed. Is there a way for me to add this same feature to all buttons in Ionic 2? ...

cordovaangulartypescriptnpmionic2

Testbed: Issue encountered: Unable to resolve all parameters for PriDateInput component

I am facing an issue while creating an Angular Component with the help of TestBed. The error message I receive is as follows: Error: Can't resolve all parameters for PriDateInput: (?). error properties: Object({ ngSyntaxError: true }) ...

angulartypescriptjasminekarma-runnertestbed

What is the process for accessing NGXS selectors during unit testing?

When subscribing to the selector teamMemberService$, we expect a list to be returned, followed by some checks. I need to write tests for this code snippet, but I am unsure how to approach testing this type of subscription. if (this.doctor != undefined) ...

angularunit-testingjestjs

Slideshow through each item using Typescript and Angular8

I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example: const next = jQuery(this).next(); I am looking to convert the JQuery code from ...

jquerycssangulartypescriptcarousel

In the domain of React and Typescript, a minimum of '3' arguments is anticipated; nonetheless, the JSX factory 'React.createElement' is only equipped with a maximum of '2' arguments. This incongruity is signaled by the

I am facing an error with this particular component: const TheBarTitle = ( theClass: any, columnTitle: string, onClickAction: any, ) => { return ( <div className={theClass} title="Click to add this ...

reactjstypescript

Angular2 Error: Cannot have two identifiers with the same name, 'PropertyKey' is duplicated

I am currently developing an application with angular2 using angular-cli. Unfortunately, angular-in-memory-web-api was not included by default. After some research, I manually added the line "angular-in-memory-web-api": "~0.1.5" to my ...

javascriptnode.jsangulartypescriptnpm

Encountering failures while running Angular tests in GitHub Actions due to reading inner text (which works fine locally)

I am facing an issue in my GitHub actions workflow where Karma is unable to read the 'innerText' of a native element for an Angular project. The error 'TypeError: Cannot read properties of null (reading 'innerText')' is being ...

angulartypescriptkarma-jasminegithub-actionsangular-test

Guide on creating a decorator for asynchronous functions that runs exclusively when using `Promise.resolve()`?

This decorator is specifically designed for analytics that triggers an event when a Promise is successfully resolved. class Foo { @LogEvent("success") async bar() { await someAction(); } } After researching online, it seems like I need to a ...

angulartypescriptasync-awaittsctypescript-decorator