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...
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
 
oli8 profile image
Olivier

Thanks, was very helpful on a project of mine.

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
 
ojuliomiguel profile image
Júlio Miguel

Very helpful article.