[Question] Can we get front end coverage on the original files via source maps for Next JS?

[nunesmatheus]

Hi, thanks for the building this tool, it's really helpful!

I would like to ask for some guidance on the feasibility of capturing coverage information on the original files, via the source maps, for code that is executed on the front-end of a Next JS application.

I'm following the instructions described on the example Next JS repo and was able to generate a coverage report, but both the original files and the compiled ones show up. I cloned the example repo and noticed that the same happens there. It seems that coverage for the front-end is shown for the compiled files, but coverage for the back-end is mapped correctly to the original files, so I suppose the sourcemaps are being generated correctly.

I don't have much experience with code coverage on the front-end, so any help is appreciated.

This is the coverage report I get for the example repo:

[cenfun]

If the compiled file does not provide a sourcemap or the sourcemap fails to load, the coverage of the original files cannot be generated, just shows the coverage of the compiled file. That's why we force to Next.js enbale sourcemap

// next.config.js
const nextConfig = {
    webpack: (config) => {
        if (process.env.NODE_V8_COVERAGE) {
            Object.defineProperty(config, 'devtool', {
                get() {
                    return 'source-map';
                },
                set() {}
            });
        }
        return config;
    }
};
export default nextConfig;

Do you have above config?

[nunesmatheus]

Do you have above config?

I do, from the example repo. The coverage on the screenshot I shared was generated by just cloning the example repo and running:

npm i
npm run test:command
npm run test

Is the coverage report different for you on the example repo?

[cenfun]

No, the example repo shows different in my local.

• git clone repo
• run cli

  npm i
  npm run test

• report in console

  [MCR] Next.js V8 Coverage Report
  ┌────────────────┬──────────┬────────────┬──────────┬───────────┬──────────┬─────────────────┐
  │ Name           │    Bytes │ Statements │ Branches │ Functions │    Lines │ Uncovered Lines │
  ├────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
  │ src/app        │          │            │          │           │          │                 │
  │ ├ counter.tsx  │  86.80 % │    40.00 % │  66.67 % │  100.00 % │  73.91 % │ 12-17           │
  │ ├ layout.tsx   │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                 │
  │ ├ page.tsx     │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                 │
  │ └ about        │          │            │          │           │          │                 │
  │   ├ actions.ts │  91.86 % │    87.50 % │  50.00 % │  100.00 % │  91.67 % │ 8               │
  │   └ page.tsx   │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                 │
  ├────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
  │ Summary        │  94.14 % │    72.00 % │  62.50 % │  100.00 % │  90.79 % │                 │
  └────────────────┴──────────┴────────────┴──────────┴───────────┴──────────┴─────────────────┘

• html report (test-results/coverage/index.html)

[cenfun]

Note, the cli npm run test:command is used for playwright webServer command, you may started two server. Not sure it is the cause, but please do not run it and try again.

[nunesmatheus]

the example repo shows different in my local

Interesting. I still get the compiled files after stopping the server and just running this:

git clone git@github.com:cenfun/nextjs-with-playwright.git
cd nextjs-with-playwright
npm i 
npm run test

[MCR] Next.js V8 Coverage Report
┌────────────────────────────────────┬──────────┬────────────┬──────────┬───────────┬──────────┬────────────────────────────────────────────────────┐
│ Name                               │    Bytes │ Statements │ Branches │ Functions │    Lines │ Uncovered Lines                                    │
├────────────────────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼────────────────────────────────────────────────────┤
│ localhost-3000/_next/static/chunks │          │            │          │           │          │                                                    │
│ ├ app-pages-internals.js           │  66.22 % │    60.21 % │  44.71 % │   54.13 % │  54.61 % │ 1,35,43-48,51-59,97,105-128,135,140-255,274-276... │
│ ├ app                              │          │            │          │           │          │                                                    │
│ │ ├ page.js                        │  46.29 % │    43.34 % │  31.49 % │   50.57 % │  38.12 % │ 1,35,38,41-47,64,70-99,106-108,135-146,163,169-... │
│ │ └ about                          │          │            │          │           │          │                                                    │
│ │   └ page.js                      │   5.61 % │     0.66 % │   0.10 % │    1.88 % │   1.42 % │ 1,18-112,118-211,217-726,732-841,847-994,1000-1... │
│ └ main-app.js                      │          │            │          │           │          │                                                    │
│   └ v=1718977370683                │  44.95 % │    43.23 % │  30.80 % │   48.79 % │  38.46 % │ 1,16-18,20-23,35,72,95-97,101-104,109-132,145-1... │
│ src/app                            │          │            │          │           │          │                                                    │
│ ├ counter.tsx                      │  61.79 % │    40.00 % │   0.00 % │   50.00 % │  47.83 % │ 8-18,24                                            │
│ ├ layout.tsx                       │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                                                    │
│ ├ page.tsx                         │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                                                    │
│ └ about                            │          │            │          │           │          │                                                    │
│   ├ actions.ts                     │  92.41 % │    87.50 % │  50.00 % │  100.00 % │  91.67 % │ 8                                                  │
│   └ page.tsx                       │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                                                    │
├────────────────────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼────────────────────────────────────────────────────┤
│ Summary                            │  43.87 % │    41.99 % │  29.60 % │   46.71 % │  37.38 % │                                                    │
└────────────────────────────────────┴──────────┴────────────┴──────────┴───────────┴──────────┴────────────────────────────────────────────────────┘

[cenfun]

Yes, I got the same results now after updated the next.js version to 14.2.4 (previous is 14.1.3) It may have some structural changes for the files in new version, let me check how to fix it.

[cenfun]

@nunesmatheus It should be fixed.

• please git pull the new changes for the example repo

  
  sourceFilter: (sourcePath) => {

• return sourcePath.includes('src/');
• return sourcePath.includes('src/app'); },

• remove package-lock.json and node_modules
• npm install again
• npm run test

The new version next.js generates incomplete sourcemap contents, which prevents the normal parsing of sourcemap. it should be fixed in monocart-coverage-reports which is a dependency of monocart-reporter. Please make sure monocart-coverage-reports@2.8.5 installed.

[nunesmatheus]

Amazing, it works perfectly now! I can't believe you addressed it so fast. You made my day, thanks!