GithubHelp home page GithubHelp logo

cy-ts-istanbul-question's Introduction

Trying to make Cypress, TypeScript and IstanbulJS work together

There is a question on stackoverflow dedicated to this repository

I am trying to generate code coverage reports with IstanbulJS for my code written in TypeScript and tested with Cypress. But things get reported out of place:

IstanbulJS's HTML report with hit counter in the wrong lines

I created a git repository MCVE specifically for this question, so you can reproduce exactly my situation:

git clone https://github.com/papb/cy-ts-istanbul-question
cd cy-ts-istanbul-question
npm install
npm test
# And then open the file `coverage/index.ts.html` to see the image above.

How to fix that?


Details

I have some code written in TypeScript which I transpile and bundle to a single JavaScript (ES6) file with rollup, rollup-plugin-typescript2 and rollup-plugin-istanbul. This works perfectly, my source code in TypeScript becomes a file ready to be included with a <script> tag into the browser and used.

Secondly, I use cypress to run tests on an HTML page which includes the transpiled JS code mentioned above. This also works perfectly, cypress is able to test my functions originally written in TypeScript.

Now, I want to set up coverage reports for those tests. On Cypress FAQ we can find the question Is there code coverage? to which the answer is currently no (regarding built-in functionality) but is in discussion as a welcome thing to be done in the future, and in fact it can be done.

The thing is: the guy who did it above was not using TypeScript. I am. So I have a little extra step to do, and this is where I'm currently stuck. Intuitively, I think this is just a matter of configuring IstanbulJS to follow the source maps correctly, but I couldn't find any documentation on how to do it. Every guide about TypeScript + IstanbulJS that I can find assumes that I am using Mocha, but I'm not - I am using Cypress with a transpiled source coming from TypeScript.

Note: I am aware that in general the usual "code coverage" approach to cypress testing doesn't make much sense, but in my exact situation I think it does, I've thought about it already, please don't make this frame challenge to the question.

cy-ts-istanbul-question's People

Contributors

papb avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.