DEV Community

Cover image for Mocha/Chai with TypeScript

Mocha/Chai with TypeScript

Matteo Bruni on April 15, 2020

Introduction I wanted to create some tests for tsParticles (leave a star if you want 🌟, it's free 👀), and I didn't know anything about t...
Read full post
Collapse
 
devtronic profile image
Julian Finkler •

Great tutorial, thank you!

Collapse
 
raqhael profile image
Raphael •

I tried for like 3 Hours to test my simple typescript code with karma+jasime (because angular is using it so how hard can it be)...

Looked 2mins on this guide and it works like a charme thank you!

Collapse
 
wesleymconner profile image
WesMC •

Thanks @matteobruni quite helpful.

I was able to test APIs with minor adjustments.

For context: My source is in src/ts including tests under src/ts/test. My compiles produce one js (under src/js-tmp) per source ts (under src/ts). My dists cherry-pick from js-tmp (i.e., exclude tests, ...).

=== test-whatever.ts ===
import chai, { expect } from 'chai'
import chaiHttp from 'chai-http'
chai.use(chaiHttp);
import mocha from 'mocha'
const { describe, before, beforeEach, it, after } = mocha
  :
import { ..stuff to test.. } from '../index.js'


=== package.json ===
{ ..
  "type": "module",
  "source": "src/js-tmp/index.js",
  "main": "src/js-tmp/index.js",
..}

=== tsconfigBase.json ===
{ ..
  "esModuleInterop": true,
  "module": "es2022",
  "moduleResolution": "node",
  "target": "es2022"
.. }

=== tsconfig.json ===
{
  "extends": "../../tsconfigBase.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": "src/ts",
    "outDir": "src/js-tmp"
  },
  "include": [ "src/ts/**/*.ts" ]
}
Enter fullscreen mode Exit fullscreen mode


`

Collapse
 
tequilacat profile image
tequilacat •

OMG finally. I tried to add chai testing to my first typescript app instead of karma, all examples inevitable ended with 'Cannot use import statement outside a module'. Tried babel and configured all jsons possible with no luck.

This one finally highlighted the critical part I needed, and because the example is simple and concise it wasn't lost - env TS_NODE_COMPILER_OPTIONS='{"module": "commonjs" }'

many thanks

Collapse
 
angelincalu profile image
Angelin Calu •

'env' is not recognized as an internal or external command,

Collapse
 
matteobruni profile image
Matteo Bruni •

If you are on Windows env needs to be replaced with set, at least this is what I've read googling around.
That command is related to ts-node as you can read here

Collapse
 
belingheri profile image
Belingheri • • Edited

Yes, but i had to add &&.
set TS_NODE_COMPILER_OPTIONS={\"module\": \"commonjs\" } && mocha -r ts-node/register 'tests/**/*.ts'

Thread Thread
 
brainafesoh profile image
brainafesoh •

Damn windows, I just wasted the last 24hrs just because of this😩!
Thanks a lot.

Collapse
 
johanneshayry profile image
johanneshayry •

I have been using npmjs.com/package/cross-env for cross platform support

Collapse
 
mlp1802 profile image
Mikkel Petersen • • Edited

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home//node_modules/ts-node/register not supported resolving ES modules imported from /home/mikkel/src//node_modules/mocha/lib/esm-utils.js
Did you mean to import ts-node/register/index.js?

Is pretty much what I get no matter what tutorial I follow.

Collapse
 
pandzic1989 profile image
Ivan Pandžić •

Is env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' equivalent of adding this to your tsconfig.json

"ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
},
Enter fullscreen mode Exit fullscreen mode
Collapse
 
matteobruni profile image
Matteo Bruni •

It depends if you need that in your tsconfig, which was not my case

Collapse
 
oli8 profile image
Olivier •

Thanks, was very helpful on a project of mine.

Collapse
 
ojuliomiguel profile image
Júlio Miguel •

Very helpful article.