Symfony Encore：カルマと* .vueコンポーネント

Question

私は現在、新しいSymfonyアプリケーションを準備しており、VueとTypeScriptとKarmaをテスト用に使用したいと考えています。 Webpack Encoreは、VueとTypeScriptの設定に非常に役立ちました。 yarn encore dev --watchなどがきれいに動作します。私の唯一の問題は、カルマに*.vueファイルをうまくプレイさせることができないということです。通常の*.tsファイルのテストはまったく問題ありません。たぶん、他の誰かが同様の問題を抱えていて、それについて何をすべきかを知っています。次のように

私webpack.config.jsに見えます：

このような

var Encore = require('@symfony/webpack-encore'); 

// Export runtime environment, if Encore is not available 
var isProduction = true; 
try { 
    isProduction = Encore.isProduction(); 
} catch (e) { 
    console.log('No Encore environment found, configuring runtime environment'); 
    Encore.configureRuntimeEnvironment(
    'dev-server', 
    { 
     https: true, 
     keepPublicPath: true, 
    } 
); 
} 

Encore 
    // directory where all compiled assets will be stored 
    .setOutputPath('web/assets/build/') 

    // what's the public path to this directory (relative to your project's document root dir) 
    .setPublicPath('/web/assets/build') 

    // empty the outputPath dir before each build 
    .cleanupOutputBeforeBuild() 

    // will output as web/build/app.bundle.js 
    .addEntry('app.bundle', './src/assets/scripts/app.ts') 

    // allow *.ts and *.vue files to be processed 
    .enableTypeScriptLoader(options => { 
    options.appendTsSuffixTo = [/\.vue$/]; 
    options.transpileOnly = true; 
    }) 

    // will transpile Vue.js components 
    .enableVueLoader(options => { 
    options.loaders.ts = 'ts-loader!tslint-loader' 
    }) 

    // enable tslint loader and show linting errors in the console 
    // based on the "tslint-loader/vue-loader/ts-loader"-snippet: 
    // https://github.com/palantir/tslint/issues/2099#issuecomment-292524819 
    .addLoader({ 
    test: /\.ts$/, 
    loader: 'tslint-loader', 
    exclude: /(node_modules)/, 
    enforce: 'pre', 
    options: { typeCheck: true, configFile: './tslint.json' }, 
    }) 

    // will output as web/build/app.styles.css 
    .addStyleEntry('app.styles', './src/assets/styles/app.scss') 

    // allow sass/scss files to be processed 
    .enableSassLoader() 

    // Autoprefixer and other postcss plugins, see postcss.config.js 
    .enablePostCssLoader(options => { 
    options.config = { 
     path: 'postcss.config.js', 
    }; 
    }) 

    // Add source maps for dev 
    .enableSourceMaps(!isProduction) 
; 

// export the final configuration 
module.exports = Encore.getWebpackConfig(); 

そしてkarma.conf.js：

var webpackConfig = require('./webpack.config'); 

module.exports = function (config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['mocha', 'chai', 'sinon'], 
    files: [ 
     'src/assets/scripts/**/*.spec.ts', 
    ], 
    exclude: [], 
    preprocessors: { 
     'src/assets/scripts/**/*.ts': ['webpack'], 
    }, 
    webpack: { 
     module: webpackConfig.module, 
     resolve: webpackConfig.resolve, 
    }, 
    webpackMiddleware: { 
     noInfo: true, 
     stats: 'errors-only', 
    }, 
    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['PhantomJS'], 
    singleRun: false, 
    concurrency: Infinity, 
    }); 
}; 

私はすでにドキュメントを読み、これとそれを固定数え切れないほどの時間を過ごしました。私はVue CLIを使ってサンプルプロジェクトを作成しましたが、この設定について何が間違っているか分かりません。以下のテストファイルが美しく動作します：

import { expect } from 'chai'; 
import { App } from '../../core/App'; 


describe('App Core',() => { 
    let app: App; 

    beforeEach(() => { 
    app = new App(); 
    }); 

    it('should have a public app name',() => { 
    expect(app.name).to.be.a('string'); 
    expect(app.name).to.be.equal('my test app'); 
    }); 

    it('should have a public app version',() => { 
    expect(app.version).to.be.a('string'); 
    }); 

}); 

しかし、ここで、HelloWorldComponentが定義されていない：

import { expect } from 'chai'; 
import { VueConstructor } from 'vue'; 
import HelloWorldComponent from '../../../components/vue/HelloWorld.vue'; 


describe('HelloWorld.vue',() => { 

    it('should be a valid Vue component',() => { 
    expect(HelloWorldComponent).to.be.a(VueConstructor); 
    }); 

}); 

ソリューションやアイデアは非常に、非常に歓迎されています。前もって感謝します！静かに私は、問題を発見したプラグインが必要でしたが、ロードされていない:)私を助けようとしたすべての人に

乾杯

Answer 1

ありがとう：今魅力のような

var webpackConfig = require('./webpack.config'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = function (config) { 
    config.set({ 
    basePath: '', 
    frameworks: ['mocha', 'chai', 'sinon'], 
    files: [ 
     'src/assets/scripts/**/*.spec.ts', 
    ], 
    exclude: [], 
    preprocessors: { 
     'src/assets/scripts/**/*.ts': ['webpack'], 
    }, 
    webpack: { 
     module: webpackConfig.module, 
     resolve: webpackConfig.resolve, 
     // This is the relevant bit: 
     plugins: [ 
     new ExtractTextPlugin("app.styles.css") 
     ] 
    }, 
    webpackMiddleware: { 
     noInfo: true, 
     stats: 'errors-only', 
    }, 
    reporters: ['progress'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['PhantomJS'], 
    singleRun: false, 
    concurrency: Infinity, 
    }); 
}; 

ワークス:)