instrumented code can not view in html report

[kazaff]

Hi there.
I'm not sure this issue is belong this plugin, or any other part? So I choose ask first,🤣

As the issue subject said, when I send the window.__coverage__ to the istanbul server, I only can see the corrent list page, like:

But HelloWorld.vue's coverage detail page is empty, like:

I think this issue is beacause vite transform the SFC format to js, this plugin works with js code version(means instrument the js code).
So when the html report map the coverage data to SFC file, Crash....

But, As this plugin said:

// this allows us to wait until the whole code is JavaScript to
// instrument and sourcemap

What can I do? Is my goal weird?

[kazaff]

Version info:

"vite": "^4.0.0",
"vite-plugin-istanbul": "^3.0.4",

My vite config is :

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import istanbul from 'vite-plugin-istanbul';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        istanbul({
            include: ['modules/*', 'components/*'],
            exclude: ['node_modules', 'test/', 'dist/'],
            extension: ['.js', '.ts', '.mjs', '.vue'],
            requireEnv: false,
        }),
    ],
    build: {
        sourcemap: true
    }
})

It seem like build.sourcemap is not working..... 😭

[Christian Norrman]

Hi @kazaff, thanks for the issue.

At first glance the error seems to be thrown by the reporter.
But I think the error originates from the fact that there is no data to be read from the file.

It would be interesting if you could try to debug the transformation of this plugin while its running in Vite. My guess is that either the transformation of the .vue file is not happening for the file. Or that Vue doesn't transform the file correctly.

Could you try to create a repo where I can reproduce this?
Or could you try to debug so the file is not excluded in some way when the plugin handles it.

[kazaff]

Hi @iFaxity , thank you for reply!

Sorry, I don't know how to debug this plugin.. 😢

I create a repo for you, please try this:
https://github.com/kazaff/vue-coverage-demo

Thank you in advance. 👍

[Christian Norrman]

Hi @kazaff,

No worries ill take a look.
Thanks for the repo :).

[Christian Norrman]

Hi @kazaff,

I've tested now using the repo you provided and have some results.

The error you run into is caused by the npm package istanbul-middleware. As evidenced that the error message you provided comes from the coverageServer.js file.

TypeError: Cannot read properties of undefined (reading 'text')
    at ./vue-coverage-demo/node_modules/istanbul/lib/report/html.js:239:52
    at Array.forEach (<anonymous>)
    at annotateFunctions (./vue-coverage-demo/node_modules/istanbul/lib/report/html.js:224:26)
    at HtmlReport.writeDetailPage (./vue-coverage-demo/node_modules/istanbul/lib/report/html.js:427:9)
    at Object.render (./vue-coverage-demo/node_modules/istanbul-middleware/lib/core.js:211:16)
    at ./vue-coverage-demo/node_modules/istanbul-middleware/lib/handlers.js:67:14
    at Layer.handle [as handle_request] (./vue-coverage-demo/node_modules/express/lib/router/layer.js:95:5)
    at next (./vue-coverage-demo/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (./vue-coverage-demo/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (./vue-coverage-demo/node_modules/express/lib/router/layer.js:95:5)

The error in fact comes from istanbul but is derived through istanbul-middleware.

I generated a similar report using Cypress and it seems to be working correctly.

I suggest looking into another way for you to view/generate coverage reports. As the one you are using right now is kind of janky and uses a 7 year old npm package. I suggest using a e2e testing tool (like Cypress which i used for the above image).

However the error you run into is not caused by this plugin as i can generate reports from the code coverage using another more up to date tool. So I'm sorry but i cannot help you any further in this regard.

You could try forking the package and update it, however i think your code coverage server solution is maybe not the most optimal. Considering you have to export the coverage yourself using a command and then view it through another webpage. But thats my own opinion.

[kazaff]

@iFaxity Thanks.
You help me a lot!

I think it's time to upgrage my front-end tech toolbox. 👍