通过 tsconfig 路径导入时代码运行但 instanceof 失败
code runs but instanceof failes when importing via tsconfig path
这里有些奇怪的行为。我正在使用 Mocha 编写单元测试,它调用 Class 的静态方法,将 LatLng 转换为传单 L.LatLng 对象。在测试结束时,我正在检查返回的对象是否确实是 L.LatLng 的实例。令人惊讶的是,测试失败了,即使它确实是 L.LatLng 的一个实例。摸索了几个小时后,我能够将问题缩小到以下几点。
如果我通过 tsconfig 路径参数
导入转换器 class
import { LeafletConverter } from '@maps/leaflet/leaflet-converter';
然后测试失败。但是如果我通过相对路径导入它:
import { LeafletConverter } from '../../../app/maps/leaflet/leaflet-converter';
然后测试通过没有错误。问题是,这里发生了什么,有什么方法可以保持“@maps/...”导入样式吗?
版本:
$ tsc --version
Version 3.6.3
VSCode 1.39.2
测试文件:
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;
}
...
}
测试命令&输出:
$ "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"
}
}
找到解决办法。问题的根本原因是 mocha 命令行命令中 ts 文件的绝对路径。
当我修改这个...
$ "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-clusterer/src/test/**/*.test.ts
对此...
$ "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 src/test/**/*.test.ts
然后一切正常。这是为什么呢?我不知道...
这里有些奇怪的行为。我正在使用 Mocha 编写单元测试,它调用 Class 的静态方法,将 LatLng 转换为传单 L.LatLng 对象。在测试结束时,我正在检查返回的对象是否确实是 L.LatLng 的实例。令人惊讶的是,测试失败了,即使它确实是 L.LatLng 的一个实例。摸索了几个小时后,我能够将问题缩小到以下几点。 如果我通过 tsconfig 路径参数
导入转换器 classimport { LeafletConverter } from '@maps/leaflet/leaflet-converter';
然后测试失败。但是如果我通过相对路径导入它:
import { LeafletConverter } from '../../../app/maps/leaflet/leaflet-converter';
然后测试通过没有错误。问题是,这里发生了什么,有什么方法可以保持“@maps/...”导入样式吗?
版本:
$ tsc --version
Version 3.6.3
VSCode 1.39.2
测试文件:
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;
}
...
}
测试命令&输出:
$ "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"
}
}
找到解决办法。问题的根本原因是 mocha 命令行命令中 ts 文件的绝对路径。 当我修改这个...
$ "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-clusterer/src/test/**/*.test.ts
对此...
$ "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 src/test/**/*.test.ts
然后一切正常。这是为什么呢?我不知道...