Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the documentation from Istanbul JS and Cypress, but it's proving to be more challenging than expected. Below is the output showing coverage data for only 3 files, despite the app consisting of hundreds of files where critical base Vue files like main.ts and router.ts are missing. How can I generate a comprehensive coverage report for my entire Vue app?

To follow the Cypress code coverage guidelines, I have included the following files in my project:

babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            {
                useBuiltIns: 'entry',
            },
        ],
    ],
    plugins: [ 'istanbul' ],
}

nyc.config.js

module.exports = {
    extends: '@istanbuljs/nyc-config-typescript',
    all: true,
    extension: [
        '.vue',
        '.ts',
    ],
    include: [
        'src/**/*.{vue,ts}',
    ],
}

package.json

"scripts": {
    "e2e": "NODE_ENV=production vue-cli-service test:e2e --mode 'e2e'",
    "coverage": "npm run e2e -- --headless --spec tests/e2e/specs/example.test.js && npx nyc report --reporter=text"
},
"devDependencies": { //List of dependencies }

Cypress plugins/index.js

module.exports = (on, config) => {
    on('task', require('@cypress/code-coverage/task'))

    return Object.assign({}, config, {
        integrationFolder: 'tests/e2e/specs',
        screenshotsFolder: 'tests/e2e/screenshots',
        videosFolder: 'tests/e2e/videos',
        supportFile: 'tests/e2e/support/index.js',
    })
}

Cypress support/index.js

import '@cypress/code-coverage/support'
import './commands'

Cypress.Screenshot.defaults({
    screenshotOnRunFailure: false,
})

------------------------------|----------|----------|----------|----------|-------------------|
File                          |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------------|----------|----------|----------|----------|-------------------|
All files                     |    20.24 |        0 |     4.44 |    19.87 |                   |
 Charts                       |    54.55 |        0 |        0 |       50 |                   |
  ScoreSummaryChart.vue       |    54.55 |        0 |        0 |       50 |    40,48,54,62,79 |
 Quizzes                      |    15.93 |        0 |        0 |    16.19 |                   |
  QuizView.vue                |    15.93 |        0 |        0 |    16.19 |... 13,416,417,418 |
 Tiles                        |    22.73 |        0 |    15.38 |    21.95 |                   |
  QuizOverviewTile.vue        |    22.73 |        0 |    15.38 |    21.95 |... 71,175,185,188 |
------------------------------|----------|----------|----------|----------|-------------------|
javascripttypescriptvue.jscypressistanbul

Answer №1

  1. install 

    @istanbuljs/nyc-config-typescript
    in your devDependencies

  2. update your babel.config.js file

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['babel-plugin-istanbul', {
      extends: '@istanbuljs/nyc-config-typescript',
      extension: ['.ts', '.tsx', '.js', '.vue']
    }]
  ]
}

  1. remove the nyc.config.js file from your project

  2. delete the node_modules/.cache folder

  3. restart your server to apply changes

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

Executing multiple child processes in a loop with asynchronous operations and collecting the output after the loop concludes

Here's a snippet of code I've been working on... const { exec } = require('child_process'); const Main = async () => { const result = await RetrieveAllItems(); console.log('output', result); }; const RetrieveAllI ...

javascriptnode.jsasynchronousstdoutchild-process

What are the steps to redirect from a nested route back to the top route using Node.js with Express?

Is there a way to redirect from a nested route to a top route in Express.js? In the following code snippet, how can we make the callback for the route /toproute/nested redirect to /profile instead of /toproute/profile? // app.js const express = require(& ...

javascriptnode.jsexpressexpress-router

The base64 code generated by the toDataURL method on the canvas appears to be incorrect

I am facing an issue with my code while using canvas to draw a cropped image with base 64. The problem is that it works perfectly on Chrome but gives me a blank image on Firefox. async function base64SquareCrop(imgbase64, size = 224) { const img = docume ...

javascripthtml

Crafting callback functions

My jQuery code looks like this: $('#current_image').fadeOut(function(){ $('#current_image').attr('src',newImage).show(); }); This process is wonderful - the nested function runs smoothly after the fadeOut. I ...

javascriptjquerycallbackjquery-events

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

htmlcssangulartypescriptcss-selectors

Get JSON data through AJAX using two different methods

Help needed: JSON request issue with XMLHttpRequest var xhr = new XMLHttpRequest(); function elenco_studenti() { var url = "/controller?action=student_list"; xhr.responseType = 'text'; xhr.open("GET", url, true); xhr.onreadystat ...

javascriptajax

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

My code seems to be experiencing issues in Internet Explorer where some of the JS and jQuery codes are not functioning correctly initially, but start working after refreshing the page a few times. Any thoughts on why this could be happening? Here is the ...

javascriptjqueryhtml

Error: Import statement is invalid outside of a module in next.js

Every time I attempt to run the register.tsx page in my next.js project, I encounter the error message shown below. My Next.Js project utilizes TypeScript. import React, { useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import st ...

node.jstypescriptnext.js

Exploring the world with an interactive map in R, incorporating Shiny and leaflet

I'm currently attempting to integrate a Google layer as the base layer for a Leaflet map in Shiny R. To achieve this, I've been utilizing shinyJs to inject a JavaScript script into my R code and add the map. However, I'm facing an issue wher ...

javascriptrgoogle-mapsshinyleaflet

The textures in three.js material do not interact with lighting sources

I am curious about whether a textured geometry can be successfully lit in three.js. In my current scene, I have noticed that all materials receive lighting effectively when using spotLight and directionalLight, except for those that have a texture applied ...

javascriptthree.jstexture-mapping

Tips for using regular expressions with the find method in JavaScript?

Welcome to my Object: let data = [{ "title": "User info", "category": "personal", "userId": "abc12345" }, { "title": "Customer Info", "category": ...

javascriptnode.jsreactjsobject

Dynamic JavaScript Line Graph

I am facing a challenge with a small function in my application that needs to display real-time data on a webpage. I have been exploring different Javascript examples, such as the Flot example "real-time updates" and the Highcharts example "spline updating ...

javascriptchartslinereal-time

Angular 2: Emptying input field value on click event

I am experiencing an issue with resetting my input values. I have a search bar with filter functions. When I enter a value, it displays a list below and I want to add a function to these links. When I click on one of them, it takes me to another component ...

javascripthtmlangulartypescript

I am experiencing an issue where my code is not iterating over the data in my

The issue I'm facing with the code below is that it only displays the quantity of the first item, rather than all items in my shopping cart. import {ShoppingCartItem} from './shopping-cart-item'; export class ShoppingCart { constructor ...

angulartypescript

Syntax for nested arrow functions in TypeScript

const fetchAsyncData = (input: { value: string }): AppThunk => async (dispatch) => { try { const fetchedData = await getData({ input.value }); } catch (error) { console.log(error); } }; An error message is displayed stating "No value ...

typescriptredux-thunk

An issue arose during the page prerendering process for "/" on Vercel | Next.js resulting in a deployment error

When attempting to deploy my website using Vercel and generating static pages, I encountered the following error in the logs: info - Generating static pages (0/6) Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/ ...

javascriptdeploymentnext.jsvercelpre-rendering

Improved method for transferring multiple form input values from a child to a parent window

I am working on a project where I have a child window containing multiple radio buttons. My goal is to send all the selected values from these radio buttons to the parent window. Currently, I am achieving this by creating a JavaScript string that contains ...

javascripthtml

Error throwing when attempting to use additional plugins in Angular CKEditor

I have been attempting to utilize the angular ckeditor extension found at: https://github.com/lemonde/angular-ckeditor UPDATE: I have already injected 'ckeditor' into the app modules. Within my partial html, I am including the following direc ...

javascriptangularjsckeditorwysiwygmathjax

Styling a table based on specific conditions using Angular and JavaScript

I am trying to conditionally style the text in the table based on the time elapsed since the last ping. Specifically, I want to change the color of the text from green to red once 5 minutes have passed and vice versa. <form name="myform" data-ng-submit ...

javascripthtmlcssjsonangularjs

Node.JS using Express: Issue : encountering EADDRINUSE error due to address being already in use

Currently, I am in the process of developing a CRUD API with Node.js and Express. Everything was going smoothly until today when a new error message popped up. It appears that I can only use a TCP Port once. Whenever the server is stopped and restarted, I ...

javascriptnode.jsexpress