Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Currently, I am facing the challenge of generating code coverage for my TypeScript project using remap Istanbul. The issue arises due to the usage of async/await in my code, which TypeScript cannot transpile into ES5 directly. To circumvent this limitation, I have incorporated Babel into the process. This means that my TypeScript code is first transpiled by the TypeScript compiler to ES6, and then further transpiled to ES5 by Babel.

However, when attempting to generate a coverage report, there is an error loading the JavaScript file created by TypeScript, since it is not being generated (as I am using gulp with direct piping). What steps should I take to establish an effective setup in this scenario?

javascripttypescriptbabeljsremap-istanbul

Answer №1

Only Istanbul 1.x does it effectively.

Find the details in this repository:

{
  "name": "sample-babel-node",
  "version": "1.0.0",
  "description": "Illustrative project showcasing source mapped coverage reports using istanbul",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "babel-node ./node_modules/istanbul/lib/cli.js cover ./test/index.test.js"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17707e6357707e637f62753974">[email protected]</a>/istanbuljs/sample-babel-node.git"
  },
  "author": "",
  "license": "BSD-3-Clause",
  "bugs": {
    "url": "https://github.com/istanbuljs/sample-babel-node/issues"
  },
  "homepage": "https://github.com/istanbuljs/sample-babel-node#readme",
  "dependencies": {
    "babel-cli": "^6.2.0",
    "babel-preset-es2015": "^6.1.18"
  },
  "devDependencies": {
    "istanbul": "^1.0.0-alpha.2"
  }
}

For additional information, refer to this git issue, where you can explore more about gulp, grunt, and similar tools.

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

Setting limits to disable or remove specific times from the time picker input box in Angular

I'm having trouble with a time input box. <input type="time" min="09:00" max="18:00" \> Even though I have set the min and max attributes to values of 09:00 and 18:00 respectively, it doesn't seem to be working properly. I want to ...

javascripthtmlangulartypescript

Convert a JSON array into a new format

Here is the JSON data input provided: "rows": [ [ 1, "GESTORE_PRATICHE", 1, "GESTORE PRATICHE", "canViewFolderManagement" ], [ 2, "ADM ...

javascriptjsonunderscore.js

Unable to dynamically display an HTML5 video using JavaScript

I'm facing an issue with displaying videos in a modal dynamically. Here's the scenario: +------------+---------+ | Name | View | +------------+---------+ | 1.mp4 | X | | 2.mp4 | X | +------------+---------+ The X ...

javascripthtmlvideo

All outcomes being displayed from Youtube's json feed

Currently, I am retrieving a youtube playlist by using the following link: I'm curious if there is a method to display all 250 videos from my feed instead of just the 25 that are currently being shown. Any assistance on this matter would be highly a ...

javascriptjsonyoutubefeed

What is the best method for incorporating information into an existing object when it is currently empty?

When it comes to data removal, my method involves locating the element using findIndex and marking it as a null value in isInArray. However, if no such data exists, how can I add it to an empty element starting from the first one? For instance, if the fi ...

javascriptvue.jsvuejs2

Learn how to transform a raw readme file into an HTML formatted document using AngularJS, after retrieving it from GitHub

Can someone help me figure out how to format each line of the README.MD raw file into an HTML document using the controller below? angular.module('ExampleApp', []) .controller('ExampleController', function($scope, Slim,$sce) { ...

javascripthtmlangularjsgithub-apireadme

Navigating through an ajax-based webpage entirely with selenium webdriver

I have attempted to scroll a page entirely using the following code: var scrollToBottom = function() { window.scrollTo(0, Math.max(document.documentElement.scrollHeight, document.body.scrollHeight, document.documentElement.clientHeight)); }; window.on ...

javajavascriptwindowsseleniumwebdriver

How do I adjust brightness and contrast filters on a base64 URL?

When presented with an image in base64 format like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDAAwfqNRk/rjcYX+PxrV/wtWqwJSTlboMgAAAABJRU5ErkJggg== What is the most efficient method to programmatically alter a filter (such as brightness or cont ...

javascripttypescriptimage-processingcss-filters

Turn off auto-suggestion feature on the iPad and iPhone keyboard using JavaScript

I'm facing a challenge where I want to turn off the predictive suggestions and autocorrect feature on the iPad keyboard. This image is just for display purposes and not from my actual project. I need to hide the highlighted suggestion bar, and I am u ...

javascriptiosreactjsipadmaterial-ui

The function within filereader.onload is not running properly in JavaScript

When working with FileReader to read a file and convert it to base64 for further actions, I encountered an issue. Although I was able to successfully read the file and obtain its base64 representation, I faced difficulties in utilizing this data to trigger ...

javascripttypescriptfilereader

Using jQuery to Retrieve Accurate User Identification - Making AJAX Requests

Currently, I am facing a bit of a dilemma. I have implemented 2 jQuery scripts to handle updating a simple database row based on user ID and session. This functionality allows users to send a "Gift" that adds value to their database row column "bonus". Wh ...

javascriptphpjquerymysqlajax

When making xmlhttp requests, IE9 will prioritize loading from the cache rather than from the server when the data is available

During my local development process, I've been utilizing this AJAX code: function getChart(num,ld,margin,idr) { idr = typeof(idr) != 'undefined' ? idr : 0; $(ld).style.display="inline-block"; if (window.XMLHttpRequest) { ...

phpjavascriptajaxinternet-explorer

The Node module's package.json does not have a main "exports" defined

After recently adding the zx NPM package to my project, I encountered a puzzling issue. The installation went smoothly, and I proceeded to import it into my code: import { $ } from 'zx' (async () => { await $`mkdir test` })() However, u ...

javascriptnode.jsnpm

Exploring the capabilities of AngularJS directives through ng-html2js testing

Many questions have been raised about the ng-html2js plugin, but unfortunately, none of the answers provided were able to solve my specific issue. I meticulously followed the official installation guide and also referenced the example available at https:/ ...

javascriptangularjsunit-testingng-html2js

express-validator: bypass additional validation in a user-defined validator

Utilizing the express-validator package for validating my request data. As per the documentation, we need to declare them in this manner: app.use(expressValidator({ customValidators: { isArray: function(value) { return Array.isArray(value); ...

javascriptnode.jsvalidationexpress

Stop the Router from Displaying the Page momentarily prior to Redirecting

Currently, I have set up a session context for my NextJS application where users accessing pages within the /app/ directory are required to undergo an authorization check before being granted access. Although the logic is functioning correctly in redirect ...

javascriptreactjsnext.js

Is there a way to create a JavaScript script that automatically updates a webpage for all users simultaneously?

I have developed a web application that enables users to modify content using JavaScript. Currently, these changes are only visible on the local browser and do not involve AJAX. However, I am wondering how I can ensure that these DOM alterations are refle ...

javascriptajaxhtml

Saving Files in Your React Web Application: Tips and Tricks

Currently, I am working on a React web application that requires the temporary storage of Torrent pieces for streaming purposes using a web player. Any recommendations on how to properly store this data temporarily in order to facilitate the streaming pro ...

javascriptreactjsexpress

Why would someone use the `catch` method in Angular $http service when the `then` method already takes two arguments (success and error callbacks)?

When working with the Angular $http service, there is a then method that can take two arguments - one for success and one for error. But why would you use the catch method if there's already an error callback? And what is its purpose? Here's an ...

javascriptangularjs

Exploring the Force-Directed Graph Demo on bl.ocks.org

I don't have much expertise in javascript, jquery, or json. My objective is to create a graph using the force-directed graph example from bl.ock.us. 1) I wrote a python script to generate the necessary json data. 2) I noticed others were us ...

javascriptjqueryjsond3.js