Code Instrumentation of micro frontends are not take into account

[Jonathan Gelin]

Describe the bug
I have an application that follows the micro-frontends architecture. It means that some parts of the application are bundled separately and loaded in async mode.

I would like to see the code covered in my micro frontend. However, when debugging cypress coverage, I see the window.__coverage__ is undefined because the application is loaded but not the micro-frontend yet.

If debug and check the window.__coverage__ of the cypress iframe a bit later, it is filled correctly.

Is there a way to delay or restart the coverage configuration when we know that the page is ready? In our visit command per example?

Sequence

1. Coverage correctly configured:
   

2. Visit the application page and load the main page:
   

3. Debug the beforeEach hook that is configuring the call to saveCoverageObject function when the window object is loaded:
   
   

4. No instrumentation loaded (yet) because the micro-frontend is not yet loaded

5. Load of the micro-frontend with the instrumentation

6. Log the window.__coverage__ in the console ---> contains all paths

7. Test successful!

Versions

"cypress": "12.5.1",
"@cypress/code-coverage": "^3.9.12",

❯ node -v
v18.13.0

❯ node -v
v18.13.0

Configs

Instrumentation of the code using babel-plugin-istanbul:

module: {
      rules: [
        {
          test: /\.(js|ts)$/,
          loader: 'babel-loader',
          options: { plugins: ['babel-plugin-istanbul'] },
          enforce: 'post',
          include: [...],
          exclude: [...],
        },
      ],
    },

nyc.config.js:

module.exports = (projectRoot) => ({
  extends: '@istanbuljs/nyc-config-typescript',
  'report-dir': require('path').resolve(__dirname, `dist/cypress/${projectRoot}/reports/coverage`),
  reporter: ['json'],
  extensions: ['.ts'],
  cwd: __dirname,
  exclude: [
    '**/node_modules/**',
    '**/test/**',
    '**/.storybook/**',
    '**/cypress/**',
    '**/cypress-legacy/**',
    '**/generated/**',
    '**/*.d.ts',
    '**/*.mdx',
    '**/*stories*.{js,ts}',
    '**/*spec*.{js,ts}',
    '**/*.cy*.{js,ts}',
    '**/index.{js,ts}',
    '**/jest.config.{js,ts}',
    '**/*.interface*.{js,ts}',
    '**/*.type*.{js,ts}',
    '**/*webpack*.config.{js,ts}',
    '**/.{eslint,mocha}rc.{js,cjs}',
    '**/*-e2e/**/*.*',
    '**/*main.{js,ts}',
    '**/*set-public-path.{js,ts}',
  ],
  excludeAfterRemap: true,
  all: true,
  sourceMap: false,
  instrument: false,
});

DEBUG

  code-coverage combined NYC options { 'report-dir': '/Users/################/app-name-e2e/reports/coverage', reporter: [ 'json' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: true, extends: '@istanbuljs/nyc-config-typescript', extensions: [ '.ts' ], cwd: '################', exclude: [ '**/node_modules/**', '**/test/**', '**/.storybook/**', '**/cypress/**', '**/cypress-legacy/**', '**/generated/**', '**/*.d.ts', '**/*.mdx', '**/*stories*.{js,ts}', '**/*spec*.{js,ts}', '**/*.cy*.{js,ts}', '**/index.{js,ts}', '**/jest.config.{js,ts}', '**/*.interface*.{js,ts}', '**/*.type*.{js,ts}', '**/*webpack*.config.{js,ts}', '**/.{eslint,mocha}rc.{js,cjs}', '**/*-e2e/**/*.*', '**/*main.{js,ts}', '**/*set-public-path.{js,ts}', '**/shared-ng/ui/**', '**/shared/ui/**' ], all: true, sourceMap: false, instrument: false } +0ms

  code-coverage reset code coverage in interactive mode +0ms

⚠️ file /Users/################/apps/app-name-e2e/.nyc_output/out.json has no coverage information
Did you forget to instrument your web application? Read https://github.com/cypress-io/code-coverage#instrument-your-application

  code-coverage ⚠️ file /Users/################/apps/app-name-e2e/.nyc_output/out.json has no coverage information +10m
  code-coverage ⚠️ file /Users/################/apps/smc/app-name-e2e/.nyc_output/out.json has no coverage information +2ms
  code-coverage nyc needs to report on all included files +8s
  code-coverage include all files options: { all: true, include: undefined, exclude: [ '**/node_modules/**', '**/test/**', '**/.storybook/**', '**/cypress/**', '**/cypress-legacy/**', '**/generated/**', '**/*.d.ts', '**/*.mdx', '**/*stories*.{js,ts}', '**/*spec*.{js,ts}', '**/*.cy*.{js,ts}', '**/index.{js,ts}', '**/jest.config.{js,ts}', '**/*.interface*.{js,ts}', '**/*.type*.{js,ts}', '**/*webpack*.config.{js,ts}', '**/.{eslint,mocha}rc.{js,cjs}', '**/*-e2e/**/*.*', '**/*main.{js,ts}', '**/*set-public-path.{js,ts}', '**/shared-ng/ui/**', '**/shared/ui/**' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ] } +3ms
  code-coverage using default list of extensions +10ms
  code-coverage searching files to include using patterns [ '**/*.js', '**/*.cjs', '**/*.mjs', '**/*.ts', '**/*.tsx', '**/*.jsx', '!**/node_modules/**', '!**/test/**', '!**/.storybook/**', '!**/cypress/**', '!**/cypress-legacy/**', '!**/generated/**', '!**/*.d.ts', '!**/*.mdx', '!**/*stories*.{js,ts}', '!**/*spec*.{js,ts}', '!**/*.cy*.{js,ts}', '!**/index.{js,ts}', '!**/jest.config.{js,ts}', '!**/*.interface*.{js,ts}', '!**/*.type*.{js,ts}', '!**/*webpack*.config.{js,ts}', '!**/.{eslint,mocha}rc.{js,cjs}', '!**/*-e2e/**/*.*', '!**/*main.{js,ts}', '!**/*set-public-path.{js,ts}', '!**/shared-ng/ui/**', '!**/shared/ui/**', '!**/node_modules/**' ] +0ms

  code-coverage found 0 file(s) +146ms
  code-coverage no files found, hoping for the best +1ms
  code-coverage calling NYC reporter with options { 'report-dir': '/Users/################dist/cypress/apps/app-name-e2e/reports/coverage', reporter: [ 'json' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: true, extends: '@istanbuljs/nyc-config-typescript', extensions: [ '.ts' ], cwd: '/Users/Jgelin/dev/grizzly', exclude: [ '**/node_modules/**', '**/test/**', '**/.storybook/**', '**/cypress/**', '**/cypress-legacy/**', '**/generated/**', '**/*.d.ts', '**/*.mdx', '**/*stories*.{js,ts}', '**/*spec*.{js,ts}', '**/*.cy*.{js,ts}', '**/index.{js,ts}', '**/jest.config.{js,ts}', '**/*.interface*.{js,ts}', '**/*.type*.{js,ts}', '**/*webpack*.config.{js,ts}', '**/.{eslint,mocha}rc.{js,cjs}', '**/*-e2e/**/*.*', '**/*main.{js,ts}', '**/*set-public-path.{js,ts}', '**/shared-ng/ui/**', '**/shared/ui/**' ], all: true, sourceMap: false, instrument: false, 'temp-dir': '/Users/################/apps/app-name-e2e/.nyc_output', tempDir: '/Users/################/apps/app-name-e2e/.nyc_output', reportDir: '/Users/################/dist/cypress/apps/app-name-e2e/reports/coverage' } +160ms
  code-coverage current working directory is /Users/################/apps/app-name-e2e +1ms
  code-coverage after reporting, returning the report folder name /Users/################/dist/cypress/apps/app-name-e2e/reports/coverage +332ms
  code-coverage Final coverage in /Users/################/dist/cypress/apps/app-name-e2e/reports/coverage/coverage-final.json +1ms
  code-coverage There are 0 key(s) in /Users/################/dist/cypress/apps/app-name-e2e/reports/coverage/coverage-final.json +2ms

[Jonathan Gelin]

Just initializing the window.__coverage__ in my visit command solves the issue.

In fact, the reference of the object is kept by cypress

[winjay-yu-awx]

Just initializing the window.__coverage__ in my visit command solves the issue.

In fact, the reference of the object is kept by cypress

Thanks @jogelin, it fixed my issue.