如何将测试添加到现有的 Typescript 项目，并让它显示在测试资源管理器中？

Posted 2023-03-13

【中文标题】如何将测试添加到现有的 Typescript 项目，并让它显示在测试资源管理器中？

【英文标题】：How can I add testing, to an existing Typescript project, and get it to show up in Test Explorer?

【发布时间】：2020-06-29 21:36:51

【问题描述】：

我一直在玩一个尚未编写测试的 Typescript 项目。 (Commit Adding Tests)

我尝试了 2 种不同的方法来添加用 Typescript 编写的测试。

launch.json package.json

这两种方法目前都有效，并且能够通过正常的任务启动/调试进行调试。

但是我尝试了 2 种不同的 VSCode 扩展，以添加对测试资源管理器的支持以运行这些测试、获得更好的 GUI 和自动反馈、可视化覆盖率等。

Mocha-Sidebar 和 Mocha test Explorer

他们都没有选择我使用默认配置编写的测试。而且他们都有关于如何设置测试的稀疏文档用 Typescript 编写

所有在网上找到的博文，目前似乎都与命令行/任务启动的测试相关。

如何将 Mocha-Sidebar 或 Mocha-Test-Explorer 或其他一些测试资源管理器适配器配置为与该提交中的测试一起使用。

是否可以在不向 git 存储库提交更多配置文件的情况下，让某人 fork 项目并能够运行测试。

例如BDD 样式，在 test 文件夹中，命名为 test/hello-world.test.ts，用 Typescript 编写，完全支持调试。

【参考方案1】：

调用 Mocha

当您通过命令行、package.json 或 launch.json 调用 mocha 时，您向 mocha 提供了两个关键信息：

指定测试文件所在位置的全局模式。 --require 标志，指定要加载的任何其他模块。

当使用提到的一个或两个 VSCode 扩展时，需要为扩展提供这两个关键信息。

---

配置扩展

这两个扩展有很多重叠，所以我建议使用其中一个。我个人的偏好是 Mocha Test Explorer。我发现 Mocha Sidebar 在运行较大的测试套件时非常缓慢。无论如何，它们的配置方式都非常相似：

摩卡浏览器

告诉它测试在哪里，并使用ts-node 进行即时编译。这些设置位于用户级别或项目级别的settings.json 中。

"mochaExplorer.files": "test/**/*.test.ts",
"mochaExplorer.require": [
    "ts-node/register",
],

摩卡侧边栏

用稍微不同的词告诉它同样的事情：

"mocha.requires": [
    "ts-node/register",
],
"mocha.files.glob": "test/**/*.test.ts"

---

覆盖率可视化

为了在 VSCode 中可视化覆盖率数据，您可以尝试类似coverage-gutters 的方法。我没有发现你提到的任何一个扩展都对实际查看我的覆盖率数据有用。

---

在哪里应用这些设置？

为了确保刚接触该项目的开发人员可以“一马当先”，我喜欢将这种配置签入到项目中，如.vscode/settings.json。

项目之间的 glob 模式通常会有所不同，给定项目所需的模块也会有所不同--require。因此，对我来说，这种配置与项目一起存在 是有意义的。

---

工作示例

我克隆了你的项目并将上面的配置添加到.vscode/settings.json：

【讨论】：

与问题无关，但您使用的主题是什么？我喜欢它！

谢谢，@PedroMutter！它是自制的，我似乎从来没有把它弄乱过。所以我不能给你指出一个主题，但我只是把我的工作台扔了colorCustomizationsinto a gist。

谢谢！我期待扩展读取 mocha 的配置，或与 mocha 共享配置文件。所以只有一个事实来源。当在多个地方指定相同的设置时，我已经看到其他系统出现问题。但如果这是不可能的，我想我必须配置扩展。