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 👀).
tsparticles
/
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.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
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.
Happy TypeScript testing to everyone.
If you want to support me, here's my GitHub sponsor profile
Top comments (7)
"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".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.
Getting below error:
project-name@0.0.1 test
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)
That is a problem with Chai.js 5.x, using 4.x will solve that. Open discussion here: github.com/chaijs/chai/discussions...
did you solve the error?
these are good updates and it works till restricted versions of mocha and chai
here is what I'm using
"@types/chai": "^4.3.5",
"@types/mocha": "^10.0.1",
"chai": "^4.3.7",
"cross-env": "^7.0.3",
"mocha": "^10.2.0",
@matteobruni where do we need to write the .mocharc.json file? Is ./tsconfig.test.json and .mocharc.json both are same?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.