Converting newly created angular cli project to use mocha framework instead of jasmine

Question

Hey i created a new project with latest angular cli. It creates a project that uses jasmine as the testing framework. I wanted to use mocha.

I added the required plugins following the project https://github.com/arranbartish/angular-cli-seed/blob/master/karma.conf.js

I get the following error when running test using command ng test

Has anybody faced an error or is there a way to figure out what is generating this issue.

Answer 1

The Problem

zone.js uses a handful of "patches" when it is used in a test environment. For convenience, zone.js provides a single module that bundles all those patches together. That module is zone.js/dist/zone-testing. This is the package that @angular/cli uses in the test setup, it is imported in src/test.ts. The problem is that zone.js/dist/zone-testing assumes you are using jasmine and includes a jasmine patch. The jasmine patch is what is causing your error.

The Fix

To fix it, you just have to import each of the patches yourself instead of using the convenience, prepackaged module. In src/test.ts

import 'zone.js/dist/zone-testing';

needs to become

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/mocha-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/zone-patch-promise-test';

These are the exact same packages that zone.js/dist/zone-testing uses; however, it is importing the mocha-patch instead of the jasmine-patch.