草庐IT

javascript - 尝试让 Cypress、TypeScript 和 IstanbulJS 协同工作

coder 2024-05-12 原文

我正在尝试使用 IstanbulJS 生成代码覆盖率报告对于我在 TypeScript 中编写的代码并使用 Cypress 进行了测试.但是事情被报告得不对劲:

我创建了一个 git repository MCVE专门针对这个问题，所以你可以准确地重现我的情况:

git clone https://github.com/papb/cy-ts-istanbul-question
cd cy-ts-istanbul-question
npm install
npm test
# And then open the file `coverage/index.ts.html` to see the image above.

如何解决？

详情

我有一些用 TypeScript 编写的代码，我使用 rollup 将其转换并捆绑到单个 JavaScript (ES6) 文件中, rollup-plugin-typescript2和 rollup-plugin-istanbul .这非常有效，我在 TypeScript 中的源代码变成了一个文件，可以包含在 <script> 中。标记到浏览器中并使用。

其次，我使用 cypress在包含上述转译 JS 代码的 HTML 页面上运行测试。这也很完美，cypress 能够测试我最初用 TypeScript 编写的函数。

现在，我想为这些测试设置覆盖率报告。在 Cypress 常见问题解答中，我们可以找到问题 Is there code coverage? 目前答案是否(关于内置功能)，但答案是 in discussion作为 future 要做的一件受欢迎的事情，in fact it can be done .

问题是:上面做这件事的人并没有使用 TypeScript。我是。所以我还有一些额外的步骤要做，这就是我目前遇到的问题。直觉上，我认为这只是配置 IstanbulJS 以正确遵循源映射的问题，但我找不到有关如何执行此操作的任何文档。 Every guide about TypeScript + IstanbulJS that I can find假设我使用的是 Mocha，但我没有 - 我使用的是 Cypress 和来自 TypeScript 的转译源。

注意:我知道通常用于 cypress 测试的“代码覆盖率”方法没有多大意义，但在我的具体情况下我认为它确实如此，我已经考虑过了，拜托不要让这个框架挑战问题。

编辑:需要说明的是，在这里使用汇总并不是硬性要求。如果您有一个使用其他东西的解决方案，那也是完全可以接受的。正如标题所说，重要的是 Cypress + TypeScript + IstanbulJS。

最佳答案

我使用了webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul

基本上策略是:

  • 检测您的应用代码，以便在 window.__coverage__
    • 上生成覆盖率
  • cypress 规范运行后，使用cy.writeFile 将报告保存到.nyc_output
  • 并使用 cy.exec('nyc report --reporter=html')
    • 生成报告

然后您应该能够在 coverage/ 目录中查看 html 覆盖率报告

这是我对您的项目所做的更改，切换到具有完整工作代码覆盖率的 webpack:

https://github.com/Bkucera/cypress-code-coverage/commit/40f88aa27778dc55ad3fae56af66724f73b6496d

我已经整理了其他工作示例 here .它有在新弹出的 create-react-app(使用 webpack)和 vanilla typescript + webpack 之上设置代码覆盖率的示例项目:

create-react-app-ejected :

cypress 在新弹出的 create-react-app 上设置了代码覆盖率 用途:

  • @babel/preset-typescript
  • @cypress/webpack-preprocessor
  • babel-loader
  • babel-plugin-istanbul

vanilla-typescript-webpack :

vanilla typescript & webpack 项目的代码覆盖率 用途:

  • @babel/preset-typescript
  • @cypress/webpack-preprocessor
  • babel-loader
  • babel-plugin-istanbul

在这两个中，我还检测了 cypress 代码，以便您可以合并覆盖率报告，但我目前不这样做

关于javascript - 尝试让 Cypress、TypeScript 和 IstanbulJS 协同工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54937425/

javascriptTypeScriptcodenoreferrernoopenercypressistanbulrollupjs

有关javascript - 尝试让 Cypress、TypeScript 和 IstanbulJS 协同工作的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表，并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码)，并打印以下消息。鉴于该程序非常简单，我已经没有什么想法了-有什么建议吗？/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  4. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  7. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  8. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  9. ruby - `rescue $!` 是如何工作的？ - 2

    我知道全局变量$!包含最新的异常对象，但我对下面的语法感到困惑。谁能帮助我理解以下语法？rescue$! 最佳答案 此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回，这很有用。a=get_me_datarescue$!在此行之后，a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的

  10. ruby - File.read ("| echo mystring") 是如何工作的？ - 2

    我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？ 最佳答案 来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro

随机推荐