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

Question

我一直在玩一个尚未编写测试的 Typescript 项目。（提交添加测试）

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

1. 启动文件
2. 包.json

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

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

Mocha-Sidebar和Mocha 测试资源管理器

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

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

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

是否有可能不向 git 存储库提交进一步的配置文件，并让某人 fork 项目并能够运行测试。

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

Answer 1

调用摩卡

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

• 指定测试文件所在位置的 glob 模式。
• 一个--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：