Tôi đang cố gắng kiểm tra (với phạm vi phủ sóng) ứng dụng TypeScript của tôi bằng cách sử dụng Karma, Jasmine và Webpack. Với những điều sau đây, tôi có thể chạy thử nghiệm thành công, nhưng không thể tạo vùng phủ sóng đúng cách. Tôi đang sử dụng karma-remap-coverage (https://github.com/sshev/karma-remap-coverage) và dường như đủ đơn giản.Không thể tìm thấy bản đồ nguồn cho Karma + Jasmine + TypeScript + Webpack
Nó trông như một điều gì đó thú vị đang xảy ra (và tôi nhận được một số loại báo cáo bảo hiểm) nhưng với một vài điều chỉnh ở đây và ở đó, những con số thay đổi đáng kể và tôi không bao giờ có thể tải các sourcemaps.
Dưới đây là các thiết lập cơ bản:
Tôi có một thư mục src có chứa 10 .ts tập tin. Chỉ có một tệp có tệp .spec tương ứng vào lúc này.
File spec là khá đơn giản và chỉ đủ để chứng minh rằng tôi có thể chạy thử nghiệm:
import ComponentToTest from './componentToTest';
describe('ComponentToTest',() => {
it('should run a test',() => {
expect(1+1).toBe(2);
});
it('should be able to invoke the a method',() => {
spyOn(ComponentToTest, 'foo').and.callThrough();
ComponentToTest.foo('testing foo');
expect(ComponentToTest.foo).toHaveBeenCalled();
});
});
này hoạt động như một nét duyên dáng khi kết hợp với tsconfig.json tập tin của tôi:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"lib": ["es6", "dom"],
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
và karma.conf.js file:
module.exports = config => config.set({
frameworks: ['jasmine'],
mime: { 'text/x-typescript': ['ts','tsx'] },
// if I make this a generic './src/**/*.ts' it seems to freeze up
// without throwing any errors or running any tests, but that seems
// like a separate issue...
files: [
'./src/lib/componentToTest.ts',
'./src/lib/componentToTest.spec.ts'
],
preprocessors: {
'./src/**/*.spec.ts': ['webpack'],
'./src/**/*.ts': ['webpack', 'sourcemap', 'coverage']
},
webpack: {
devtool: "source-map",
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
},
// add both "karma-coverage" and "karma-remap-coverage" reporters
reporters: ['progress', 'coverage', 'remap-coverage'],
// save interim raw coverage report in memory
coverageReporter: {
type: 'in-memory'
},
// define where to save final remaped coverage reports
remapCoverageReporter: {
'text-summary': null,
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
colors: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
Và f inally, tôi đang tung ra các cuộc thử nghiệm với một nhiệm vụ Gulp đơn giản:
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, (exitCode) => {
done();
process.exit(exitCode);
}).start();
});
Khi chạy, tôi nhận được một đầu ra mà dường như (chủ yếu) hứa hẹn:
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 1 of 2 SUCCESS (0 secs/0.002 secs)
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 2 of 2 SUCCESS (0.026 secs/0.004 secs)
[Error: Could not find source map for: "app/src/lib/componentToTest.ts"]
[Error: Could not find source map for: "app/src/lib/componentToTest.spec.ts"]
========================= Coverage summary =========================
Statements : 43.69% (322/737)
Branches : 15.7% (38/242)
Functions : 35.47% (61/172)
Lines : 44.91% (322/717)
====================================================================
Vì vậy, một cái gì đó đang xảy ra! Điều này làm tôi cảm thấy gần gũi. Khi tôi duyệt đến báo cáo bảo hiểm của tôi trong một trình duyệt, tôi thấy cả .spec.ts tập tin và các tập tin được liệt kê .ts (đó là một lần nữa, tiến gần hơn) nhưng tôi không hoàn toàn có cho một vài lý do:
- Các
.spec.tstệp đang được đưa vào báo cáo bảo hiểm. Vì đây là tệp thử nghiệm, tôi không muốn bao gồm nó. - Bản đồ nguồn không được tạo đúng cách - điều này rõ ràng từ các lỗi trong bảng điều khiển và cũng không có khả năng duyệt qua báo cáo bảo hiểm của tệp cụ thể.
Tôi cảm thấy mình khá gần gũi. Có bất cứ điều gì đơn giản mà tôi đang thiếu hoặc gợi ý?
Cập nhật:
tôi nhận ra tôi đã sử dụng một phiên bản cũ của Node và nghĩ rằng có thể gây ra một số vấn đề.Tôi nâng cấp lên 6.11.0 và trong khi điều đó không giải quyết bất cứ điều gì, nó đã cung cấp bối cảnh nhẹ hơn:
Các lỗi được báo cáo bởi remap-istanbul (không ngạc nhiên ở đó, thực sự):
CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)
Tôi đang sử dụng [email protected] sử dụng [email protected] - có vẻ như đã xảy ra sự cố với remap-istanbul trong quá khứ, nhưng không phải là phiên bản tôi đang sử dụng.
Cũng sử dụng Webpack 2.6.1 và nguyên cảo 2.3.2