In the process of writing a unit test using Mocha, I encountered some peculiar behavior. The test involves calling a static method of a Class that converts a LatLng to a leaflet L.LatLng object. At the end of the test, I validate whether the returned object is truly an instance of L.LatLng. To my surprise, the test failed despite it being an instance of L.LatLng. After spending several hours investigating, I was able to pinpoint the issue to the following problem.
When I import the Converter class using the tsconfig path parameter:
import { LeafletConverter } from '@maps/leaflet/leaflet-converter';
The test fails. However, if I import it using a relative path:
import { LeafletConverter } from '../../../app/maps/leaflet/leaflet-converter';
The test passes without any errors. So, the question arises - why does this happen and is there a way to maintain the '@maps/...' import style?
Versions:
$ tsc --version
Version 3.6.3
VSCode 1.39.2
Test file:
import { expect } from 'chai';
import 'mocha';
import L from "leaflet";
import { LeafletConverter as DirectLeafletConverter } from '../../../app/maps/leaflet/leaflet-converter';
import { LeafletConverter } from '@maps/leaflet/leaflet-converter';
import { LatLng } from '@maps/lat-lng';
describe.only('maps/leaflet/asdf', () => {
it('tsconfig path import - this test fails', () => {
const leafletll = LeafletConverter.toLeafletLatLng(new LatLng(1,2));
const test = leafletll instanceof L.LatLng;
expect(test).to.be.true;
});
it('direct import - this test passes', () => {
const leafletll = DirectLeafletConverter.toLeafletLatLng(new LatLng(1,2));
const test = leafletll instanceof L.LatLng;
expect(test).to.be.true;
});
});
LeafletConverter.ts
import { LatLng } from "@maps/lat-lng";
import L from "leaflet";
import { LatLngBounds } from "@maps/lat-lng-bounds";
export abstract class LeafletConverter {
private constructor(){}
...
public static toLeafletLatLng(latLng: LatLng): L.LatLng {
let result: L.LatLng = null;
if(LatLng.isValid(latLng)) {
result = L.latLng(latLng.lat,latLng.lng);
}
return result;
}
...
}
Test command & output:
$ "C:\\Program Files\\nodejs\\node.exe" --inspect-brk=22915 node_modules\\mocha\\bin\\_mocha -r ts-node/register -r tsconfig-paths/register --timeout 30000 --colors C:\\Users\\Asdf\\tmp\\rm.js\\group
test/**/*.test.ts
Debugger listening on ws://127.0.0.1:22915/e1b8ec38-90ac-41dd-aded-c2c20e2ffa28
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
maps/leaflet/asdf
1) tsconfig path import
√ direct import
1 passing (14ms)
1 failing
1) maps/leaflet/asdf
tsconfig path import:
AssertionError: expected false to be true
+ expected - actual
-false
+true
at Context.<anonymous> (C:\Users\Asdf\tmp\rm.js\group-clusterer\src\test\maps\leaflet\asdf.test.ts:16:27)
Waiting for the debugger to disconnect...
package.json
{
"name": "typescript-webpack-seed-project",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha -r ts-node/register -r tsconfig-paths/register src/test/**/*.test.ts",
"compile": "npx tsc",
"cc": "npx tsc -w",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/chai": "^4.2.3",
"@types/googlemaps": "^3.38.0",
"@types/leaflet": "^1.5.5",
"@types/mocha": "^5.2.7",
"@types/node": "^12.12.5",
"@types/q": "^1.5.2",
"@types/rbush": "^2.0.3",
"chai": "^4.2.0",
"jsdom": "15.2.1",
"jsdom-global": "3.0.2",
"leaflet": "^1.5.1",
"mocha": "^6.2.1",
"ts-loader": "^6.2.0",
"ts-node": "^8.4.1",
"tsconfig-paths": "^3.9.0",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"tslint": "^5.20.0",
"typescript": "^3.6.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"
},
"dependencies": {
"q": "^1.5.1",
"rbush": "^3.0.1"
}
}