Executing jasmine tests in Visual Studio Code - a step by step guide

After setting up visual studio code with jasmine and typescript installed, I have created a spec file named TestSpec.ts.

describe("Testing", () =>{
    it("should pass", () =>{
   let msg = "Welcome to TypeScript";
    //I want to print the msg first like a log
    expect(msg).toBe("Welcome to TypeScript")
    })
})

I am looking for guidance on how to print the value of msg as logs and run the jasmine test in visual studio code. I attempted to use specrunner.html to run the tests, but the result only shows pass or fail without displaying any logs.

Answer №1

After completing the tasks below, I successfully achieved my goal.

  1. npm install --save-dev jasmine @types/jasmine
  2. Adjust tsconfig.json to incorporate jasmine types globally, generate source maps, and direct all output to the dist folder.
{
  "compilerOptions": {
    /* ... */
    "sourceMap": true,
    "outDir": "./dist",
    "types": [
      "node",
      "jasmine"
    ],
    /* ... */
  }
}
  1. Established an npm task to execute jasmine with node inspector. Using inspect-brk requires node version 8 or above. For versions 7 and some 6 versions, you can use inspect, but I decided not to explore this option further for fear it might not capture my breakpoints in time.
{
  /* ... */
  "scripts": {
    "build": "tsc --project .",
    "test:debug": "npm run build && node --inspect-brk node_modules/jasmine/bin/jasmine.js JASMINE_CONFIG_PATH=jasmine.json"
  },
  /* ... */
}
  1. Generated a launch task in VS Code (launch.json) to initiate the NPM task.
{
  /* ... */
  "configurations": [
    /* ... */
    {
      "type": "node",
      "request": "launch",
      "name": "Run Jasmine Tests",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "test:debug"
      ],
      "outFiles": [
        "${workspaceRoot}/dist/**.js"
      ],
      "protocol": "inspector",
      "port": 9229,
      "sourceMaps": true
    },
    /* ... */
  ]
  /* ... */
}

Once these steps are completed, launching the task from Visual Studio will execute your code and halt at relevant breakpoints.

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

Observe the task while returning - Firebase Functions

I am working on a Firebase Cloud Functions project where I need to run a scraping task within one of the functions. While the scraping is in progress, I also need to provide progress updates to the consumer. For example, informing them when the task is at ...

IntelliSense for TypeScript Variable Names in Intellij

When declaring a variable or field in Java, it is common practice to specify the type. For example: public SomeDataType someDataType = new SomeDataType(123) As you begin typing Som.., IntelliJ's autocomplete feature will likely suggest SomeDataTyp ...

What is the process for including a unique attribute for child elements within a React component using TypeScript?

I have a component that creates a Table of Contents (TOC) and List for the child elements. These children can be any JSX.Element. Here is an example... <SectionScrollList> <View key="first"/> <View key="second"/> ...

Implementing the 'keepAlive' feature in Axios with NodeJS

I've scoured through numerous sources of documentation, Stack Overflow threads, and various blog posts but I'm still unable to make the 'keepAlive' functionality work. What could I be overlooking? Here's my server setup: import ex ...

When using Angular 10 or later, the mouseclick event will consistently trigger Angular's change detection mechanism

When I bind an event to elements on a component's HTML page, the component continues to detect changes even when the element event is fired. Despite setting the change detection mode of the component to OnPush, this behavior persists. To test this, I ...

How can I showcase array elements using checkboxes in an Ionic framework?

Having a simple issue where I am fetching data from firebase into an array list and need to display it with checkboxes. Can you assist me in this? The 'tasks' array fetched from firebase is available, just looking to show it within checkboxes. Th ...

Exceed the capacity of a React component

Imagine having a React component that can render either a <button>, an <a>, or a React Router <Link> based on different props passed to it. Is it possible to overload this component in order to accept the correct props for each scenario? ...

Choosing the Right Language for AngularJS 2: TypeScript, JavaScript, or Dart?

AngularJS 2 is on the horizon, and the documentation recommends three languages: Typescript, Javascript, and Dart. As someone who primarily works with Javascript EcmaScript 5, I'm curious about the strengths and weaknesses of these three options. Cu ...

Encountering an error with TypeScript generic parameters: Expecting '?' but receiving an error message

As a newcomer to TypeScript, I am currently exploring the use of generic type parameters. I have encountered an error message: '?' expected while working on a function and a type that both require type arguments. The issue seems to be in the Inpu ...

Issues with Next.js and Framer Motion

My component is throwing an error related to framer-motion. What could be causing this issue? Server Error Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function This error occurred during page generation. Any console logs will be ...

The issue of the Angular service being consistently undefined arises when it is invoked within an

I have already researched numerous other SO questions, but none of the solutions worked for me. My goal is to implement an async validator that checks if a entered username already exists. However, every time I type a letter into the input field, I encoun ...

Exploring the process of setting up Jasmine tests for both services and controllers in Angular.js

I have been facing challenges in creating accurate tests for my Angular services and controllers, even though they are functioning correctly. I have searched extensively for a solution to this problem. Below is an example of my controller: angular.module ...

Tips for accessing the app instance within a module in Nest.js

Currently, I am involved in a project that relies on multiple Nest repositories, approximately 4 in total. Each repository must integrate logging functionalities to monitor various events such as: Server lifecycle events Uncaught errors HTTP requests/resp ...

Issues arise with the play method in Storybook and Jest when attempting to use the shouldHaveBeenCalled assertion on a

Here is a snippet of the component code: import { FC, ReactElement, useState, MouseEvent as ReactMouseEvent, ChangeEvent as ReactChangeEvent, } from 'react'; import { Stack, TablePagination } from '@mui/material'; export con ...

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

Best Practices for Integrating Angular with Your Custom JavaScript Library

Imagine needing to create a TypeScript function that can be utilized across various components, services, or modules. For example, let's say you want an alert wrapper like this: my_alert(msg); // function my_alert(msg) { alert(msg); } You might hav ...

"Embracing the power of multiple inheritance with Types

I am struggling with the concept of multiple inheritance in TypeScript. It doesn't make sense to overload a hierarchy with too much functionality. I have a base class and several branches in the hierarchy. However, I need to utilize mixins to isolate ...

Is there a way for me to use TypeScript to infer the type of the value returned by Map.get()?

type FuncType<O extends Object> = (option: O) => boolean export const funcMap: Map<string, Function> = new Map() const func1: FuncType<Object> = () => true const func2: FuncType<{prop: number}> = ({ prop }) => prop !== 0 ...

Consolidate all REST service requests and match the server's response to my specific object model

My goal was to develop a versatile REST service that could be utilized across all my services. For instance, for handling POST requests, the following code snippet demonstrates how I implemented it: post<T>(relativeUrl: string, body?: any, params?: ...

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

When I make a call to axios, I include a config object like this: const req = { method, url, timeout: 300000, headers: { 'Content-Type': 'application/json' } } axios(req) An error in TypeScript is thrown stating that "No overload matc ...