如何生成 vscode TypeScript 扩展覆盖率报告

Question

对于使用 TypeScript 构建的 VSCode 扩展，似乎无法使用coveralls覆盖率报告。

目前，我正在向我们的项目https://github.com/PicGo/vs-picgo/pull/42添加测试用例，我找到了几种报告覆盖率的方法，但它们都不适合我。

使用自定义 TestRunner

官方文档几乎没有提到自定义测试运行器，但我在这里找到了一个帖子。 它在我使用F5启动Extension Test ，但在控制台中运行npm run test时不起作用（根本没有覆盖输出）。

我也试图了解博客文章中的自定义运行器（源代码），但我发现我无所事事，因为我不知道它为什么起作用。

使用nyc

nyc with mocha 非常强大，但我们不能利用它。 当我运行nyc ./node_modules/vscode/bin/test ，我将得到 0% 的覆盖率：

我搜索了nyc的问题页面，关于 TS 项目存在许多相同的 0% 覆盖率问题，但它们与我们的环境都不相同。 主要区别在于他们使用mocha进行测试，不像 VSCode 的./node_modules/vscode/bin/test脚本，它会创建一个新进程来运行测试 js 文件。 我不知道如何处理这个。

我搜索了所有问题（mocha、tyc、istanbul、vscode 等...），但很少（我没有找到任何😭）vscode TypeScripts 正在使用覆盖报告供我复制。 所以我的问题是：如何获得我的 VSCode TS 扩展的覆盖率报告？

Answer 1

我在 Mocha、NYC 和 VSCode 上搞定了一切！

您可以在https://github.com/jedwards1211/vscode-extension-skeleton 中看到我对此的解决方案。

基本上，在运行测试之前，我使用 Babel 用@babel/preset-typescript和babel-plugin-istanbul转译我的.ts代码。 这允许我跳过检测tsc输出和使用remap-istanbul的复杂的额外步骤。

然后在测试运行器中，我使用（未真正记录的）NYC API 在测试完成后将覆盖范围写入磁盘。

最后，在我的包脚本中，我在测试命令完成后运行nyc report 。

更新：您也需要在每次测试运行之前删除.nyc_output文件夹。

src/test/index.js

import NYC from 'nyc'

export async function run(): Promise<void> {
  const nyc = new NYC()
  await nyc.createTempDirectory()
  // Create the mocha test
  const mocha = new Mocha({
    ui: 'tdd',
  })
  mocha.useColors(true)

  const testsRoot = path.resolve(__dirname, '..')

  const files: Array<string> = await new Promise((resolve, reject) =>
    glob(
      '**/**.test.js',
      {
        cwd: testsRoot,
      },
      (err, files) => {
        if (err) reject(err)
        else resolve(files)
      }
    )
  )

  // Add files to the test suite
  files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)))

  const failures: number = await new Promise(resolve => mocha.run(resolve))
  await nyc.writeCoverageFile()

  if (failures > 0) {
    throw new Error(`${failures} tests failed.`)
  }
}

Answer 2

我自己已经为此苦苦挣扎了一段时间，直到我让它正常工作。 让它发挥作用存在三个主要挑战：

1. nyc实例的正确设置
2. 防止启动时出现竞争条件
3. 捕获nyc输出并将其显示在调试控制台中

你可以在这里找到我的工作测试运行器。 我还在我的博客上分享了其他见解。

Answer 3

添加自定义测试运行器

有关更多信息，请参阅此帖子，您只需将测试运行程序代码复制到项目的test/index.ts文件即可。

演示 azure 管道配置

variables:
  system.debug: true
jobs:
  - job: Windows
    pool:
      name: Hosted VS2017
      demands: npm
    steps:
      - task: NodeTool@0
        displayName: 'Use Node 12.3.1'
        inputs:
          versionSpec: 12.3.1
      - task: Npm@1
        displayName: 'Install dependencies'
        inputs:
          verbose: false

      - task: Npm@1
        displayName: 'Compile sources and run tests'
        inputs:
          command: custom
          verbose: false
          customCommand: 'test'

      # https://stackoverflow.com/questions/45602358/lcov-info-has-absolute-path-for-sf
      - script: 'sed -i -- 's/..\\..\\//g' coverage/lcov.info && npm run coveralls'
        displayName: 'Publish code coverage'  
        env:
          COVERALLS_SERVICE_NAME: $(COVERALLS_SERVICE_NAME)
          COVERALLS_REPO_TOKEN: $(COVERALLS_REPO_TOKEN)

      - script: 'npm install -g vsce && vsce package'
        displayName: 'Build artifact'
      - task: CopyFiles@2
        inputs:
          contents: '*.vsix'
          TargetFolder: '$(Build.ArtifactStagingDirectory)'
      - task: PublishBuildArtifacts@1
        inputs:
          pathtoPublish: '$(Build.ArtifactStagingDirectory)'
          artifactName: vs-picgo-dev-build
trigger:
  branches:
    include:
    - '*'  # must quote since "*" is a YAML reserved character; we want a string
pr:
- dev*

请注意，您必须使用sed删除lcov.info中SF路径的..\\..\\前缀：

前：

SF:..\..\src\vs-picgo\index.ts

后：

SF:src\vs-picgo\index.ts

演示项目： https : //github.com/PicGo/vs-picgo