I wrote an article in 2020 for using Mocha/Chai in a TypeScript project, that I'm using in tsParticles (leave a star if you want 🌟, it's free 👀).

Since then, I've made some changes to my codebase that could be helpful to someone.

New requirements

Previous packages were these:

npm install chai mocha ts-node @types/chai @types/mocha --save-dev

But now I recommend to install these instead

npm install chai mocha ts-node cross-env @types/chai @types/mocha --save-dev

If you can't spot the difference, I added cross-env to the dependencies.

The test command changed too, using cross-env instead of the env command, which works in all environments correctly.

The old command was:

"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'"

the new one is:

"test": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'"

or you can create a custom tsconfig for your tests using this command instead

"test": "env TS_NODE_PROJECT='./tsconfig.test.json' mocha -r ts-node/register 'tests/**/*.ts'"

and for a shorter command you can create a .mocharc.json file like this

{
  "extension": [
    "ts"
  ],
  "spec": "tests/**/*.ts",
  "require": [
    "jsdom-global/register",
    "ts-node/register",
    "source-map-support/register"
  ],
  "recursive": true
}

and the command

"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' mocha"

Coverage

Since then I started using the package nyc which is useful for seeing how much code is covered by tests.

It's really easy to use, and it's not interfere with mocha or chai.

Just install it like this:

npm install nyc --save-dev

You can start using nyc just putting nyc in front of mocha. Like this:

"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' nyc mocha"

Now when you run the tests, you will see a table containing every file called by tests, with uncovered lines and percentages.

Mocha/Chai with TypeScript

Matteo Bruni ・ Apr 15 '20

#tutorial #typescript #javascript #webdev

Happy TypeScript testing to everyone.

If you want to support me, here's my GitHub sponsor profile