如何将测试添加到现有的Typescript项目中，并使其显示在Text Explorer中？

Question

我一直在玩尚未编写测试的Typescript项目。（Commit Adding Tests）

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

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

但是我尝试了2种不同的VSCode扩展，为测试浏览器添加支持以运行这些测试，获得更好的GUI和自动反馈，可视化覆盖范围等。

他们都没有拿起我使用默认配置编写的测试。他们两个都有关于如何设置测试的稀疏文档用打字稿写成

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

如何将Mocha-Sidebar或Mocha-Test-Explorer或其他Test Explorer Adapter配置为与该提交中的测试一起使用。

并且有可能不将进一步的配置文件提交到git存储库，而让某人分叉该项目并能够运行测试。

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

Answer 1

Invoking Mocha

[当通过命令行，package.json或launch.json调用mocha时，您会为Mocha提供两个重要的信息：

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

配置扩展名

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

Mocha Explorer

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

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

Mocha侧边栏

用略有不同的字眼表达同一件事：

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

封面可视化

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

在哪里应用这些设置？

[为了确保新加入该项目的开发人员可以“扎根”，我想将这种配置签入项目，如.vscode/settings.json。

通常，项目之间的全局模式会有所不同，给定项目所需的模块也会--require。因此，对于我来说，这种配置与with the project。]一起使用是有意义的。

工作示例

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