Code Instrumentation of micro frontends are not take into account

未关闭
#616 6 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
cypress, javascript, typescript
领域
frontend, testing

调研方向

报告的流程使用 Cypress beforeEach hook、saveCoverageObject、babel-plugin-istanbul 和 nyc.config.js。首先跟踪 visit 的生命周期以及 window.coverage 的时机;完成的标准是异步加载的微前端能够贡献 coverage,并且 coverage-final.json 非空。

由索引模型根据 Issue 内容生成。

描述

bug

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
主要语言
TypeScript
星标
440
派生
114
平均合并
42 分钟
30 天内合并 PR
19

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

cypress-io/code-coverage 的其他 Issue

查看 cypress-io/code-coverage 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。