javascript - لا يمكن العثور على خرائط المصدر ل كارما+ياسمين+تايبسكريبت+ويباك



typescript webpack (1)

أحاول اختبار (باستخدام تغطية) تطبيق تيبسكريبت الخاص بي باستخدام كارما و ياسمين و ويباك. مع ما يلي، أنا قادرة على تشغيل بنجاح الاختبارات، ولكن أنا غير قادر على توليد التغطية بشكل صحيح. أنا باستخدام karma-remap-coverage ( https://github.com/sshev/karma-remap-coverage ) ويبدو بسيطا بما فيه الكفاية.

يبدو كما لو كان هناك شيء مثير للاهتمام يحدث (وأنا الحصول على نوع من تقرير التغطية) ولكن مع عدد قليل من القرص هنا وهناك، وتغير الأرقام بشكل كبير وأنا لا يمكن أبدا تحميل سورسيمابس.

وإليك الإعداد الأساسي:

لدي دليل src الذي يحتوي على 10 ملفات .ts . واحد فقط لديه ملف .spec المقابلة في الوقت الراهن.

ملف spec بسيط جدا وكان مجرد ما يكفي لإثبات أنني يمكن تشغيل الاختبارات:

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();
  });

});

هذا يعمل مثل سحر عندما يقترن ملف tsconfig.json بلدي:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "sourceMap": true,
    "lib": ["es6", "dom"],
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules"
  ]
}

وملف karma.conf.js :

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

});

وأخيرا، أنا إطلاق الاختبارات مع مهمة غولب بسيطة:

gulp.task('test', function (done) {
  new Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true
  }, (exitCode) => {
     done();
     process.exit(exitCode);
  }).start();
});

عند تشغيل، أحصل على الإخراج الذي يبدو (في الغالب) واعدة:

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 )
====================================================================

حتى شيء ما يحدث! مما يجعلني أشعر بأنني قريب. عندما أستعرض تقرير التغطية الخاص بي في مستعرض، أرى كل من ملف .spec.ts وملف .ts المدرج (والذي يقترب مرة أخرى) ولكني لست كذلك هناك لسببين:

  1. يتم .spec.ts ملف .spec.ts في تقرير التغطية. وبما أن هذا هو ملف الاختبار، لا أريد تضمينه.
  2. لا يتم إنشاء خرائط المصدر بشكل صحيح - وهذا واضح من الأخطاء في وحدة التحكم وأيضا من عدم القدرة على تصفح لتقرير التغطية ملف معين.

أنا أشعر وكأنني قريب من دارن قريب. هل هناك أي شيء بسيط أن أنا في عداد المفقودين أو اقتراحات؟

تحديث:

أدركت أنني كنت تستخدم نسخة قديمة من العقدة ويعتقد أنه قد يسبب بعض القضايا. قمت بترقية إلى 6.11.0 وبينما لم يحل ذلك أي شيء، فإنه يوفر سياق أكثر قليلا:

يتم الإبلاغ عن الأخطاء من قبل remap-istanbul (لا مفاجأة هناك، حقا):

CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)

أنا باستخدام [email protected] الذي يستخدم [email protected] - يبدو أن هناك قضايا مع remap-istanbul في الماضي، ولكن ليس في الإصدار الذي أستخدمه.

أيضا باستخدام ويباك 2.6.1 و تيبسكريبت 2.3.2


حسنا، بعد عدة أيام من محاولة أشياء مختلفة، لقد وجدت أخيرا الحل الذي يعمل. لست متأكدا على وجه التحديد من سبب المشكلة في مشاركتي الأولى، ولكن هنا حيث انتهى الأمر. هذا قد يكون مفيدا لشخص آخر يبحث عن بسيطة جدا تيبسكريبت، كارما، ياسمين، ويباك (مع التغطية) الإعداد.

  • بقي ملف ملف وملف spec نفسه.
  • تم تحديث tsconfig.json إلى:

    {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "inlineSourceMap": true, // this line
        "sourceMap": false, // and this one
        "experimentalDecorators": true,
        "lib": ["es6", "dom"]
      },
      "exclude": [
          "node_modules"
      ]
    }
  • تحولت إلى استخدام awesome-typescript-loader بدلا من ts-loader .

  • وأخيرا، karma.conf.js ملف karma.conf.js الآن كما يلي:

    module.exports = config => config.set({
    
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',
    
        frameworks: ['jasmine'],
    
        mime: { 'text/x-typescript': ['ts','tsx'] },
    
        files: [
            'node_modules/angular/angular.min.js',
            './src/**/*.ts'
        ],
    
        preprocessors: {
            './src/**/*.ts': ['webpack']
        },
    
        webpack: {
    
            devtool: 'inline-source-map',
            module: {
                rules: [
                    {
                        enforce: 'pre',
                        test: /\.js$/,
                        loader: 'source-map-loader',
                        exclude: [
                            'node_modules',
                            /\.spec\.ts$/
                        ]
                    },
                    {
                        test: /\.ts?$/,
                        use: [
                            {
                                loader: 'awesome-typescript-loader',
                                query: {
                                    /**
                                     * Use inline sourcemaps for "karma-remap-coverage" reporter
                                     */
                                    sourceMap: false,
                                    inlineSourceMap: true,
                                    compilerOptions: {
                                        removeComments: true
                                    }
                                },
                            }
                        ]
                    },
                    {
                        enforce: 'post',
                        test: /\.(js|ts)$/,
                        loader: 'istanbul-instrumenter-loader',
                        exclude: [
                            /node_modules/,
                            /\.spec\.ts$/
                        ]
                    },
                    { test: /\.html$/, loader: 'html-loader' }
                ]
            },
            resolve: {
                extensions: [".ts", ".js", ".html"]
            },
            externals: {
                angular: "angular"
            }
        },
    
        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
    
    });

وتشمل إصدارات الحزمة النهائية:

  • عقدة 4.2.6 (كنت أيضا قادرة على الحصول على هذا للعمل مع نسخة أحدث من العقدة، ولكن تحتاج إلى أن يكون هنا لأسباب أخرى)
  • محمل رهيبة-تيسكريبت 3.1.2
  • إستانبول-إنسترومنتر-لودر 2.0.0
  • الياسمين النواة 2.5.2
  • كارما 1.6.0
  • كارما-كروم-لونشر 2.0.0
  • تغطية الكرمة 1.1.1
  • كارما-الياسمين 1.1.0
  • كارما-ريماب-كوفيرينغ 0.1.4
  • كارما-ويباك 2.0.3
  • تيسكريبت 2.3.2
  • ويباك 2.6.1

الآن بلدي اختبارات تشغيل، لا توجد أخطاء في وحدة التحكم، ولدي تقرير التغطية من ملفات تيبسكريبت الأصلي!

الكثير من الائتمان للناس الذين وضعوا هذا معا (انتهى الأمر توجيه قليلا من الحل النهائي): https://github.com/AngularClass/angular-starter/tree/master/config