DEV Community

Cover image for Mocha/Chai with TypeScript (2023 update)
Matteo Bruni
Matteo Bruni

Posted on

Mocha/Chai with TypeScript (2023 update)

#typescript #tutorial #javascript #webdev

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 👀).

GitHub logo matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

View on GitHub

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
Enter fullscreen mode Exit fullscreen mode

But now I recommend to install these instead

npm install chai mocha ts-node cross-env @types/chai @types/mocha --save-dev
Enter fullscreen mode Exit fullscreen mode

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'"
Enter fullscreen mode Exit fullscreen mode

the new one is:

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

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'"
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

and the command

"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' mocha"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

matteobruni

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

Top comments (4)

Collapse
 
rulatir profile image
rulatir •

"module": "commonjs" is worrying. It forces me to target commonjs. That's a nasty limitation, like "it's 2023 and you wish you could live in an ESM world, but good things are not for you if you want to be able to test".

Collapse
 
matteobruni profile image
Matteo Bruni •

You can target that only for testing, like I did. I did now some research and it seems that it could be possible but the issue is still opened so maybe it's like in a beta state or something

github.com/mochajs/mocha-examples/...

Maybe I will give it a try to see if it works.

Collapse
 
vishal1610kamal profile image
Vishal Kamal •

Getting below error:
project-name@0.0.1 test

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

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /var/www/html/project-name/test/calculator.service.spec.ts
at new NodeError (node:internal/errors:399:5)
at Object.getFileProtocolModuleFormat as file:
at defaultGetFormat (node:internal/modules/esm/get_format:139:38)
at ESMLoader.defaultLoad (node:internal/modules/esm/load:83:20)
at ESMLoader.load (node:internal/modules/esm/loader:342:43)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:207:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:231:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:184:34)

Collapse
 
matteobruni profile image
Matteo Bruni •

That is a problem with Chai.js 5.x, using 4.x will solve that. Open discussion here: github.com/chaijs/chai/discussions...

Read next

waelhabbal profile image

Mastering CSS unicode-bidi Property

waelhabbal -

lico profile image

React Type Error: not assignable LegacyRef<V> && 'V' refers to a value, did you mean 'typeof V'?

SeongKuk Han -

iamdevmarcos profile image

Content Delivery Network Explained 🌎⚡️

Marcos Mendes -

faranmustafa profile image

Next Auth boilerplate TS

Syed Faran Mustafa -