vue-loader依存性注入を使用したvue.jsコンポーネントのテスト

Question

webpackのローダーvue-loaderを使用してVue.jsコンポーネントをテストしようとしています。 私はtutorialをフォローしていましたが、期待通りに機能しませんでした。

import Vue from 'vue'; 

const headerInjector = require('!!vue?inject!./Header.vue'); 
const header = headerInjector({ 
    './Header.json': { 
    brand: "Test", 
    version: "1.2.3" 
    } 
}); 

describe('Header',() => { 
    it('should be named Header',() => { 
    expect(header.name).toEqual('Header'); 
    }); 
    it('should render',() => { 
    const vm = new Vue({ 
     template: '<div><header></header></div>', 
     components: { 
     header 
     } 
    }).$mount(); 
    expect(vm.$el.querySelector('.brand-name').textContent).toBe('Test'); 
    expect(vm.$el.querySelector('.brand-version').textContent).toBe('1.2.3'); 
    }); 
}); 

が、私は私のテストを実行するためにカルマを使用します。

<template> 
    <header v-once class="header"> 
    <router-link to="/" class="brand"> 
     <span class="brand-name">{{ brand }}</span> 
     <span class="brand-version">{{ version }}</span> 
    </router-link> 
    </header> 
</template> 

<script> 
    import { brand, version } from './Header.json'; 
    export default { 
    name: 'Header', 
    data() { 
     return { 
     brand, 
     version 
     } 
    } 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    $font-stack: 'Open Sans', sans-serif; 
    $primary-color: #2d5079; 
    $border-color: #345b88; 
    $brand-color: whitesmoke; 

    .header { 
    .brand { 
     .brand-name { 
     letter-spacing: -1px; 
     } 
     .brand-version { 
     font-size: 50%; 
     } 
     display: table-cell; 
     padding-left: 10px; 
     vertical-align: middle; 
     text-decoration: none; 
     color: $brand-color; 
     text-transform: lowercase; 
     font-weight: 100; 
     font-size: 120%; 
    } 
    display: table-row; 
    height: 50px; 
    font-family: $font-stack; 
    background-color: $primary-color; 
    border-color: $border-color; 
    border-bottom: 1px solid; 
    align-items: center; 
    padding: 0 10px; 
    user-select: none; 
    } 
</style> 

はここに私のspecファイルです： は、ここに私のコンポーネントです。ここ はカルマの設定ファイルです：

const conf = require('./gulp.conf'); 

module.exports = function (config) { 
    const configuration = { 
    basePath: '../', 
    singleRun: false, 
    autoWatch: true, 
    logLevel: 'INFO', 
    junitReporter: { 
     outputDir: 'test-reports' 
    }, 
    browsers: [ 
     'PhantomJS' 
    ], 
    frameworks: [ 
     'jasmine' 
    ], 
    files: [ 
     'node_modules/es6-shim/es6-shim.js', 
     conf.path.src('app.spec.js') 
    ], 
    preprocessors: { 
     [conf.path.src('app.spec.js')]: [ 
     'webpack' 
     ] 
    }, 
    reporters: ['progress', 'coverage'], 
    coverageReporter: { 
     type: 'html', 
     dir: 'coverage/' 
    }, 
    webpack: require('./webpack-test.conf'), 
    webpackMiddleware: { 
     noInfo: true 
    }, 
    plugins: [ 
     require('karma-jasmine'), 
     require('karma-junit-reporter'), 
     require('karma-coverage'), 
     require('karma-phantomjs-launcher'), 
     require('karma-phantomjs-shim'), 
     require('karma-webpack') 
    ] 
    }; 

    config.set(configuration); 
}; 

、ここでは、前処理のための使用のWebPACKの設定です：

module.exports = { 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint' 
     } 
    ], 
    loaders: [ 
     { 
     test: /.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
     test: /.vue$/, 
     loader: 'vue' 
     } 
    ] 
    }, 
    plugins: [], 
    debug: true, 
    devtool: 'source-map' 
}; 

はここカルマ負荷テストのためのエントリポイントであるapp.spec.jsです。 これは、すべてのスペックファイルをロードするための責任です：

今

const context = require.context('./components', true, /\.spec\.js$/); 
context.keys().forEach(context); 

、私はカルマでテストを実行したときに、私は次のエラーを取得する：私はなぜこれが起こっているため見当もつかない

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR 
    TypeError: Object is not a constructor (evaluating '__vue_exports__(injections)') 
    at src/app.spec.js:1271 

、またはこのエラーが意味することは、それは私には少しわかりません。 誰かが私のエラーを突き止めて説明することができますか？

Answer 1

同じことが起こっていたのは、バージョン3以降の注入ローダーの問題であるようです。おそらく、mock docsでテストしているvuejsを更新する必要があります。あなたのpackage.jsonで

力はバージョンが

"inject-loader": "^2.0.1",