To add Mocha/Chai/Sinon
beside Jest
in an official Aurelia v1's Jest/Cypress
template so follow below steps:
-
Change current configs to make it possible to add
Mocha
beside it.- Rename
test/unit
folder totest/unit-jest
. - Change
Options.relativeToDir = path.join(__dirname, 'unit');
line insidetest\jest-pretest.ts
toOptions.relativeToDir = path.join(__dirname, 'unit-jest');
. - Change
"test": "au test",
insidepackage.json
to"test-jest": "au test",
.
- Rename
-
Create a clone of
tsconfig.json
with name oftsconfig.mocha-test.json
in root directory with these new changes
"module": "commonjs",
"target": "es6",
- Add the below config to to the
package.json
file andjest
section.
"jest": {
"roots": [
"./test/unit-jest"
],
}
- Install the below packages
npm install -D ts-node mocha chai sinon nyc @types/mocha @types/chai @types/sinon
yarn add -D ts-node mocha chai sinon nyc @types/mocha @types/chai @types/sinon
-
Create a new folder for
Mocha
teststest/unit-mocha
. -
Create
.mocharc.js
file in root directory with the following content
'use strict'
module.exports = {
exit: true,
timeout: '3000',
recursive: true,
file: ['./test/mocha-pretest.js'],
spec: "test/unit-mocha/**/*.ts"
}
- Create
mocha-pretest.js
insidetest
folder. (Should be.js
)
require("ts-node").register({
project: "tsconfig.mocha-test.json",
});
- To use Istanbul (nyc) coverage tool with Mocha, we need to add new
nyc
section into thepackage.json
.
"nyc": {
"extension": [
".ts",
".tsx"
],
"include": "src",
"exclude": [
"**/*.d.ts"
],
"reporter": [
"html",
"text"
],
"all": true,
"report-dir": "test/coverage-mocha"
}
- Add the following command to
package.json
file andscripts
section.
"test": "node_modules/.bin/nyc mocha"
Although, you can separate the test and coverage like the following:
"test": "node_modules/.bin/mocha"
"coverage": "node_modules/.bin/nyc mocha"
Now, the coverage test result will be available under test/coverage-mocha
directory.
- Just like the Jest version, create a new
app.spec.ts
file for testing inside thetest/unit-mocha
directory.
import {App} from '../../src/app';
import { expect } from "chai";
describe('the app', () => {
it('says hello', () => {
expect(new App().message).to.equal('Hello World!');
});
});
Tip: Maybe you see some TypeScript errors in your project, so, add the following configs to your main TypeScript configuration (tsconfig.json
).
"exclude": [ "test/coverage-jest", "test/coverage-mocha", "test/mocha-pretest.js" ],
and also check do you have the iterable
config for working with Cypress without problem or not.
"lib": [
// ...
"es2015.iterable",
// ...
],