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

Question

I've been playing with a Typescript project that doesn't yet have tests written. (Commit Adding Tests)

I've tried 2 different methods of adding tests written in Typescript.

launch.json
package.json

Both of these approaches currently work, and are able to be debugged via the normal task launch / debugging.

However I've tried 2 different VSCode Extensions, to add support to the test explorer to run these tests, to get better GUI and automatic feedback, visualize coverage etc.

Mocha-Sidebar and Mocha test Explorer

Neither of them have picked up the tests that I have written using the default configuration. And both of them have sparse documentation on how to setup Tests written in Typescript

All blog posts found online, currently seem to be relevant from testing from the command line / task launching.

How can Mocha-Sidebar or Mocha-Test-Explorer or Some other Test Explorer Adapter be configured to work with the tests in that commit.

And is it possible without committing further configuration files to the git repository, and have someone fork the project and be able to run the tests.

e.g. BDD style, inside test folder, named like test/hello-world.test.ts written in Typescript, With full debugging support.

user_2999566 · Answer

Invoking Mocha

When you invoke mocha via command line, package.json, or launch.json, you provide mocha with two critical pieces of information:

A glob pattern specifying where the test files are.
A --require flag, specifying any additional modules to load.

When using one or both of the VSCode extensions mentioned, the extension(s) needs to be provided these two key pieces of information.

Configuring Extensions

These two extensions have a lot of overlap, so I'd recommend using one or the other. My personal preference is Mocha Test Explorer. I found the Mocha Sidebar was excessively slow in running larger test suites. At any rate, they are both configured a very similar fashion:

Mocha Explorer

Tell it where the tests are, and to use ts-node for on-the-fly compilation. These settings go in settings.json, at either the user level or the project level.

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

Mocha Sidebar

Tell it the same thing, in slightly different words:

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

Coverage Visualization

For visualizing coverage data in VSCode, you might try something like coverage-gutters. I don't find either of the extensions you mentioned useful for actually looking at my coverage data.

Where to apply these settings?

To ensure that developers new to the project can "hit the ground running", I like to check this kind of configuration into the project, as .vscode/settings.json.

Very often the glob patterns will be different between projects, as will the modules a given project needs to --require. Therefore it makes sense to me that this configuration lives with the project.

Working Example

I cloned your project and added the configuration above to .vscode/settings.json:

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

1 Answers