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

Question

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

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

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

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

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

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

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

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

例如BDD 风格，在测试文件夹中，命名为 test/hello-world.test.ts，用 Typescript 编写，具有完整的调试支持。

Answer 1

调用 Mocha

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

使用提到的 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 的方法。我没有发现您提到的任何一个扩展对于实际查看我的覆盖率数据有用。

在哪里应用这些设置？

为了保证刚接触项目的开发者可以"hit the ground running"，我喜欢把这种配置签入项目，如.vscode/settings.json。

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

工作示例

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

How can I add testing, to an existing Typescript project, and get it to show up in Test Explorer?