How to setup Karma/Jasmine with Typescript support for a NestJs project

[maxime1992]

I'm submitting a...

[ ] Regression 
[ ] Bug report
[ ] Feature request
[ x ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

The testing documentation is great but there's no setup part and and the starters probably don't want to enforce any testing framework, we have to do that setup ourselves, which is pretty hard for angular-cli user 😅 (focus on writing code, not setting things up)

A bit of help would be veeeeery welcome for that and I'm guessing that I'm not the only one who want that kind of setup so maybe there should be some section in doc how to make a basic setup for testing a Nest project (at least with Typescript support).

So I'm creating a starter NestJs for the back, Angular for the front:
https://github.com/maxime1992/nest-angular-starter

I used karma-typescript and made a setup.
It ended up with some errors related to my karma conf, which has now been solved.

The only last error is directly related to Nest and/or Express I think.
When I launch the tests I end up with:

{ "message": "An error was thrown in afterAll\nUncaught TypeError: Object prototype may only be an Object or null: undefined", "str": "An error was thrown in afterAll\nUncaught TypeError: Object prototype may only be an Object or null: undefined" }

And I can also have this more complete stacktrace:

Chromium 64.0.3282 (Ubuntu 0.0.0) ERROR { "message": "Uncaught TypeError: Object prototype may only be an Object or null: undefined\nat /tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57170:18\n\nTypeError: Object prototype may only be an Object or null: undefined\n at Function.create ()\n at Object.global.wrappers./home/maxime/Documents/nest-angular-starter/node_modules/express/lib/request.js.depd (/tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57170:18)\n at require (/home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:17:25)\n at /home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:18:24\n at Object.global.wrappers./home/maxime/Documents/nest-angular-starter/node_modules/express/lib/express.js.body-parser (/tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57683:11)\n at require (/home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:17:25)\n at /home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:18:24\n at Object.global.wrappers./home/maxime/Documents/nest-angular-starter/node_modules/express/index.js../lib/express (/tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57787:18)\n at require (/home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:17:25)\n at /home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:18:24", "str": "Uncaught TypeError: Object prototype may only be an Object or null: undefined\nat /tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57170:18\n\nTypeError: Object prototype may only be an Object or null: undefined\n at Function.create ()\n at Object.global.wrappers./home/maxime/Documents/nest-angular-starter/node_modules/express/lib/request.js.depd (/tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57170:18)\n at require (/home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:17:25)\n at /home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:18:24\n at Object.global.wrappers./home/maxime/Documents/nest-angular-starter/node_modules/express/lib/express.js.body-parser (/tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57683:11)\n at require (/home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:17:25)\n at /home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:18:24\n at Object.global.wrappers./home/maxime/Documents/nest-angular-starter/node_modules/express/index.js../lib/express (/tmp/karma-typescript-bundle-26778Zp2MqPkTFGxe.js:57787:18)\n at require (/home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:17:25)\n at /home/maxime/Documents/nest-angular-starter/node_modules/karma-typescript/src/client/commonjs.js:18:24" }

Expected behavior

I'd just love to be able to kickstart a Nest app and focus on code/tests.
If anybody could help me make that works, then maybe we could also start a dedicated documentation section for that kind of setup?

Minimal reproduction of the problem with instructions

You can find more information where I started this issue here: monounity/karma-typescript#32 (comment)

I also have a repo where you can try it on your own:

git clone https://github.com/maxime1992/nest-angular-starter.git
git checkout feat/init-repo
yarn
yarn run back:test

What is the motivation / use case for changing the behavior?

Focus on code/tests, not tooling

Environment

Nest version: 4.6.5
 
For Tooling issues:
- Node version: 8.2
- Platform:  Ubuntu

[patrickhousley]

Karma is usually used for running frontend tests. You can use Jasmine with ts-node. Nest uses Mocha with ts-node and nyc for testing with test coverage. I personally use Jest. If you are not familiar with any of these, just mimic the testing setup used in Nest.

[maxime1992]

Yeah I understood that yesterday before going to bed 😅 ...

Every setup I had to do before Angular-Cli I've been using Karma and for backend I never had to set tests up so I didn't realized...

I also made it working with the following npm scripts:

    "back:test": "ts-node node_modules/jasmine/bin/jasmine ./backend/**/*spec.ts",
    "back:test:watch": "watch 'yarn run back:test' backend",

There are probably better ways but at least I've got something working for now.

Thanks for the description I'll look into code coverage soon 👍

[psaunders]

I agree there is a missing step in the testing documentation, if you following along with the docs doing the Cats examples you will get an error saying "cannot find name 'describe'" on the tests. It'd be really great if the demo project had a basic test in it so that the package.json file is in a good state.

[kamilmysliwiec]

The starter projects, as well as the project generated through CLI, have a base testing configuration provided out-of-the-box now.

[psaunders]

You guys wouldn't be opposed to someone writing a test or two for each of these right? https://github.com/nestjs/nest/tree/master/sample

The current coverage is fairly low

[maxime1992]

Yep I just wrote a test with Jest on a project I've started yesterday with the CLI, it's perfect @kamilmysliwiec 😄

One little thing, I'm not sure if it's because I've made a monorepo front/back or not, but VSC is going mad saying that describe, it, beforeAll, etc cannot be found.

Probably need some TS declarations...

[CoreyCole]

I can confirm starting a new project generated with the latest version of the @nest/cli, inside the generated app.controller.spec:

[ts] Cannot find name 'describe'.

[ts] Cannot find name 'beforeAll'.

[ts] Cannot find name 'it'.

[ts] Cannot find name 'expect'.

Even though they seem to be declared in @types/jest https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jest/index.d.ts

[CoreyCole]

It seems like it was just a problem with visual studio code. I had the project open at a higher directory level than where the tsconfig.json file was. I had to open vscode at the root of the cli generated project, that way, the exclude arrays takes effect:

"exclude": [
    "node_modules",
    "**/*.spec.ts"
]

Weird, as according to microsoft/TypeScript#10283 vscode should walk up the directory tree to find the nearest relevant tsconfig.json file

[CoreyCole]

I opened an issue in vscode microsoft/vscode#50910

[CoreyCole]

Not a vscode issue, adding

import 'jest';

to the top of the test file solved the red lines issue even when I didn't have the project open at the root. Maybe this should be fixed in the schematics for the cli? @kamilmysliwiec

[patrickhousley]

@CoreyCole are you experiencing issues with a project created from the CLI? Personally, I have never had to import jest at the top of my files. You might be missing a dependency. Try npm i -D @types/jest and let me know if that helps.

[CoreyCole]

I actually like this solution more:

• remove exclude **/*.spec.ts from tsconfig.json
• add this is tsconfig.json after compilerOptions

"typeAcquisition": {
    "include": [
      "jest"
    ]
  }

[CoreyCole]

@patrickhousley yes it's problems with projects created with the CLI in subdirectories, you can see my reproduction here https://github.com/CoreyCole/tsconfig-bug

And repro gifv here

Adding the typeAcquisition property to my tsconfig fixed the problem, though

[patrickhousley]

I have never seen that configuration option. What is that?? Is that only for vscode?

[CoreyCole]

I cannot find documentation for it, but here it is in Typescript source https://github.com/Microsoft/TypeScript/blob/master/lib/typescript.d.ts#L2464

[CoreyCole]

Yeah it's an open issue that the feature is not documented
microsoft/TypeScript#19369

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.