Error "Unable to lookup source" when looking at the files from the coverage report generated with @cypress/code-coverage

Question

I`m trying to generate code coverage report for a front-end application developed by someone else.

The application was developed using Vue.js and built with Vite. Also, it is served from a Docker Container.

I`m able to generate the code coverage report with the following implementation/steps:

• Install 'vite-plugin-istanbul'

• Set vite.config.js as

/* eslint-disable no-undef */
import path from 'path';

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

export default defineConfig({
  plugins: [
    vue(),
    istanbul({
      include: 'src/*',
      exclude: ['node_modules', 'test/'],
      extension: [ '.js', '.ts', '.vue' ],
      requireEnv: true
    })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 8080,
  },
  preview: {
    host: '0.0.0.0',
    port: 8080,
  },
});

• Install 'cypress' and 'cypress/code-coverage'

• Set cypress.config.js as

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  projectId: '852khb',
  chromeWebSecurity: false,
  video: true,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      require('@cypress/code-coverage/task')(on, config)

      return config
    },
  },
});

• Set \cypress\support\e2e.js as

import './commands'
import '@cypress/code-coverage/support'

and finally setting Dockerfile-dev (file referenced in docker-compose-dev.yaml > dockerfile: Dockerfile-dev) as

FROM node:18-slim

ARG BASE_API_URL
ARG SENTRY_DSN
ARG LOQATE_API_KEY

WORKDIR /opt/app
COPY ./package.json ./package-lock.json ./

RUN npm install

RUN touch .env
RUN echo "VITE_BASE_API_URL=$BASE_API_URL" >> .env
RUN echo "VITE_SENTRY_DSN=$SENTRY_DSN" >> .env
RUN echo "VITE_LOQATE_API=$LOQATE_API_KEY" >> .env
RUN echo "VITE_COVERAGE=true" >> .env

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

With all this the application correctly instruments the code and, after running 'npx cypress open' to start cypress and running some tests, a coverage folder is created where I can see the report.

However, clicking on any of the files on the report throws the error:

Unable to lookup source: /opt/app/src/App.vue (ENOENT: no such file or directory, open '/opt/app/src/App.vue') Error: Unable to lookup source: /opt/app/src/App.vue (ENOENT: no such file or directory, open '/opt/app/src/App.vue') at Context.defaultSourceLookup [as sourceFinder] (C:\esg\node_modules\istanbul-lib-report\lib\context.js:17:15) at Context.getSource (C:\esg\node_modules\istanbul-lib-report\lib\context.js:71:21) at annotateSourceCode (C:\esg\node_modules\istanbul-reports\lib\html\annotator.js:249:40) at HtmlReport.onDetail (C:\esg\node_modules\istanbul-reports\lib\html\index.js:414:33) at LcovReport. [as onDetail] (C:\esg\node_modules\istanbul-reports\lib\lcov\index.js:28:23) at Visitor.value (C:\esg\node_modules\istanbul-lib-report\lib\tree.js:38:38) at ReportNode.visit (C:\esg\node_modules\istanbul-lib-report\lib\tree.js:88:21) at C:\esg\node_modules\istanbul-lib-report\lib\tree.js:92:19 at Array.forEach () at ReportNode.visit (C:\esg\node_modules\istanbul-lib-report\lib\tree.js:91:28) at C:\esg\node_modules\istanbul-lib-report\lib\tree.js:92:19 at Array.forEach () at ReportNode.visit (C:\esg\node_modules\istanbul-lib-report\lib\tree.js:91:28) at ReportTree.visit (C:\esg\node_modules\istanbul-lib-report\lib\tree.js:127:24) at LcovReport.execute (C:\esg\node_modules\istanbul-lib-report\lib\report-base.js:12:44) at C:\esg\node_modules\nyc\index.js:467:10 at Array.forEach () at NYC.report (C:\esg\node_modules\nyc\index.js:461:19)

How/where can I set the source code path? Who is responsible for this error? NYC? Istanbul?

Thanks