Skip to content

[Help] Code Coverage and instrumenting code so I can merge them with other reports #37

Open
@snake-py

Description

@snake-py

Describe the Issue

I want to merge cumulatively storybook coder coverage reports with reports from vitest.

This one was generated using vitest coverage-final.json
This one was generated using the storybook addon coverage-storybook.json

Here are my configs for vitest

    coverage: {
      all: true,
      clean: false,
      exclude: [
      ...
      ],
      provider: 'istanbul',
      reporter: ['json', 'html']
    }
  },
// my command 
"test:coverage": "vitest --run --coverage",

For storybook I used:

addons: [
 {
      name: '@storybook/addon-coverage',
      options: {
        istanbul: {
          exclude: [
....
          ]
        }
      }
    },
    ]
    "test-storybook:coverage": "test-storybook --coverage --json --coverageDirectory=./coverage",

At the end I use nyc to merge the output files:

"test-all:coverage": "nyc merge coverage coverage/merged/coverage.json && nyc report -t coverage/merged --report-dir coverage/merged --reporter=html --reporter=cobertura",

In my merged coverage report I can then see:

image

However, when looking at only the unit test report, I can see that these lines are being hitted.

It seems that the storybook addon and vitest generate slightly different line and column for the statements.
For example in one component vitest said that there is a stmt on line 38 start at col 18 and ends on the same line.

            "2": {
                "start": {
                    "line": 38,
                    "column": 18
                },
                "end": {
                    "line": 38,
                    "column": null
                }
            },

However, storybook coverage report says the statement is on line 38 in column 2:

      "3": {
        "start": {
          "line": 38,
          "column": 2
        },
        "end": {
          "line": 38,
          "column": null
        }
      },

Steps to reproduce the behavior

  1. Create a vite react project
  2. Setup storybook and react testing library
  3. create code coverage reports with istanbul
  4. create code coverage report with this addon
  5. use nyc to merge them

Expected behavior

That I can somehow define how code is instrumented or which version of Istanbul is used. So I can merge reports from multiple testing tools.

Environment

  • OS: Ubuntu
  • Node.js version: v16.20.0
  • NPM version: ^9

Additional context

Here are the current versions of my package.json

    "vitest": "^0.29.8"
    "@vitest/coverage-istanbul": "^0.34.5",
    // looking at node_modules I can see that coverage-istanbul requires the following:
    "istanbul-lib-coverage": "^3.2.0",
    "istanbul-lib-instrument": "^6.0.0",
    "istanbul-lib-report": "^3.0.1",
    "istanbul-lib-source-maps": "^4.0.1",
    "istanbul-reports": "^3.1.5",


    
    "@storybook/addon-coverage": "^1.0.0",
    // looking at node_modules I can see:
    "istanbul-lib-instrument": "^6.0.1",
    "vite-plugin-istanbul": "^3.0.1" 
    // following vite-plugin-istanbul I can see that it uses:
    "istanbul-lib-instrument": "^5.1.0",

So now I am considering if the issue comes from different versions?

I also posted here about it:
storybookjs/storybook#25667
and commented here:
istanbuljs/nyc#1302

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions