code-coverage
code-coverage copied to clipboard
Code Instrumentation of micro frontends are not take into account
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
-
Coverage correctly configured:
-
Visit the application page and load the main page:
-
Debug the
beforeEach
hook that is configuring the call tosaveCoverageObject
function when the window object is loaded: -
No instrumentation loaded (yet) because the micro-frontend is not yet loaded
-
Load of the micro-frontend with the instrumentation
-
Log the
window.__coverage__
in the console ---> contains all paths -
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
Just initializing the window.__coverage__
in my visit command solves the issue.
In fact, the reference of the object is kept by cypress
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.
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
- Coverage correctly configured:
- Visit the application page and load the main page:
- Debug the
beforeEach
hook that is configuring the call tosaveCoverageObject
function when the window object is loaded:- No instrumentation loaded (yet) because the micro-frontend is not yet loaded
- Load of the micro-frontend with the instrumentation
- Log the
window.__coverage__
in the console ---> contains all paths- 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
How did you instrument your code? It will be helpfull if you provide me some context regarding instrumentation of the code to generage the code-coverage.
Just initializing the
window.__coverage__
in my visit command solves the issue.In fact, the reference of the object is kept by cypress
Can you please provide an example? How did you initialize the window.__coverage__
in visit command? Thx
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
- Coverage correctly configured:
- Visit the application page and load the main page:
- Debug the
beforeEach
hook that is configuring the call tosaveCoverageObject
function when the window object is loaded:- No instrumentation loaded (yet) because the micro-frontend is not yet loaded
- Load of the micro-frontend with the instrumentation
- Log the
window.__coverage__
in the console ---> contains all paths- 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
How did you instrument your microfrontend code? Can you please share the repo or example? I need help in instrumenting my micfrontend application for cypress code coverage but not able to figure out the way