Skip to content

Code Instrumentation of micro frontends are not take into account #616

Open
@jogelin

Description

@jogelin

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:
    image

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

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

  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

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