Code Coverage with MeteorJS and Cypress

help
1

I have a Meteor app with React for the front end, and we use Cypress and Jest for testing. I am trying to implement code coverage following the documentation provided by Cypress, but with no success. Any examples someone could provide on how to instrument the code? I am not sure what folder I should have as instrumented. I used the imports folder at first and Meteor ended up crashing. Any examples of how to implement Cypress code coverage with Meteor would be greatly appreciated!

2

Welcome @haase1020,

I can’t speak for Jest, but with Cypress it wasn’t straightforward from what I remember. I’ll add the few bits I can remember and hopefully it helps.

You’ll need these devDependencies

        "@cypress/code-coverage": "^3.8.1",

        "babel-plugin-istanbul": "^6.0.0",

        "istanbul-lib-coverage": "^3.0.0",

        "nyc": "^15.1.0",

In your cypress.json you’ll need

  "env": {
    "codeCoverage": {
      "url": "http://localhost:3000/__coverage__"
    }
  },

When you are running your server and want coverage switched on you’ll need to set the BABEL_ENV=coverage
So something like this in your package.json

        "run-coverage": "BABEL_ENV=coverage meteor run --settings testing.json",

On your server you’ll need an endpoint that responds and sends back the coverage data. We use express for this but it’ll be something similar depending on what you use.

    RestRouter.get(
        "/__coverage__",
        Meteor.bindEnvironment((req, res) => {
            const result = {coverage: global.__coverage__};
            res.send(result);
        })
    );

I’m assuming you have the plugins & support part setup. It’s been ages since I looked at or even ran this so apologies if things have changed or it doesn’t work at all, but I believe that’s the part that has us stumped initially. Hope it helps.

1 Like
3

Would it be possible to add the terminal output related to the crash?

4

I didn’t take a snapshot…I actually wiped out everything and had to reinstall the repo~ Hopefully I will have better luck on my next pass~

1 Like
5

Thank you for your help! I will definitely refer to this when trying to implement code coverage~

6

tl;dr (works like a charm, just tried)

In your app directory

$ npm install -D babel-plugin-istanbul

// Add to .babelrc
"env": {
    "test": {
        "plugins": [ "istanbul" ]
    }
}

$ BABEL_ENV=test meteor run

In your Cypress directory

$ npm install -D @cypress/code-coverage

// Add to support/index.js
import '@cypress/code-coverage/support';

// Add to plugins/index.js
require('@cypress/code-coverage/task')(on, config);

$ cypress run

Coverage will be generated to ./lcov-report/index.html

2 Likes
7

Thank you! I will try this out today!