Laravel + VueJs + Webpack + Karma =痛みの世界

Question

あなたのウェブパック設定にLaravel's Elixirを使用している場合、VueJsのユニットテストを書くことは可能ですか？

VueJs 2Xは、コンポーネントのテストのための非常に簡単な例があります：Vue Guide Unit testing

<template> 
    <span>{{ message }}</span> 
</template> 
<script> 
    export default { 
    data() { 
     return { 
     message: 'hello!' 
     } 
    }, 
    created() { 
     this.message = 'bye!' 
    } 
    } 
</script> 

、その後...

// Import Vue and the component being tested 
import Vue from 'vue' 
import MyComponent from 'path/to/MyComponent.vue' 

describe('MyComponent',() => { 
    it('has a created hook',() => { 
    expect(typeof MyComponent.created).toBe('function') 
    }) 
    it ...etc 
}) 

、ここでカルマのconfファイルの例を示します：https://github.com/vuejs-templates

カルマ設定ファイルにはウェブパック設定ファイルが必要です

webpack: webpackConfig, 

唯一の問題は、Laravel's ElixirがWebpack構成を作成して、含まれないことです。

https://github.com/vuejs-templates/webpackの例に基づいて別のWebpack構成ファイルを作成しようとしました。

このような何か：

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './src/main.js', 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     publicPath: '/dist/', 
     filename: 'build.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       options: { 
        loaders: { 
         // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 
         // the "scss" and "sass" values for the lang attribute to the right configs here. 
         // other preprocessors should work out of the box, no loader config like this necessary. 
         'scss': 'vue-style-loader!css-loader!sass-loader', 
         'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 
        } 
        // other vue-loader options go here 
       } 
      }, 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.(png|jpg|gif|svg)$/, 
       loader: 'file-loader', 
       options: { 
        name: '[name].[ext]?[hash]' 
       } 
      } 
     ] 
    }, 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js' 
     } 
    }, 
    devServer: { 
     historyApiFallback: true, 
     noInfo: true 
    }, 
    performance: { 
     hints: false 
    }, 
    devtool: '#eval-source-map' 
} 

とそれのような...

// Karma configuration 
// Generated on Wed Mar 15 2017 09:47:48 GMT-0500 (CDT) 
var webpackConf = require('./karma.webpack.config.js'); 
delete webpackConf.entry; 

module.exports = function(config) { 
    config.set({ 

    webpack: webpackConf, // Pass your webpack.config.js file's content 

    webpackMiddleware: { 
     noInfo: true, 
     stats: 'errors-only' 
    }, 

を含ましかし、私はWebPACKのは何もしていないことを示しているように見えるのエラーを取得しています。

Answer 1

わかりました。助けるかもしれないもののカップル。

私はもともとはgulpを実行していましたが、私の迷惑メールボックスでテストを実行しようとしていました。私はそれがインターネット上で例と答えを見つけることをはるかに困難にすると思う。

私が持っていた主な問題は、webpackがテストファイルに含まれているコンポーネントを処理していないことです。私はlaravel-elixir-vue-2/index.jsノードモジュールのwebpack設定をKarma設定ファイルに直接コピーして動作させました。

重要な点は、karma-webpackプラグインが解決とモジュールローダーの両方の設定（エイリアスと拡張で解決）を必要とすることです。

これは誰かを助けることを望みます。

karma.conf.js：

module.exports = function (config) { 
    config.set({ 
    // to run in additional browsers: 
    // 1. install corresponding karma launcher 
    // http://karma-runner.github.io/0.13/config/browsers.html 
    // 2. add it to the `browsers` array below. 
    browsers: ['Chrome'], 
    frameworks: ['jasmine'], 
    files: ['./index.js'], 
    preprocessors: { 
     './index.js': ['webpack'] 
    }, 
    webpack: { 
     resolve: { 
     alias: { 
      vue: 'vue/dist/vue.common.js' 
     }, 
     extensions: ['.js', '.vue'] 
     }, 
     vue: { 
     buble: { 
      objectAssign: 'Object.assign' 
     } 
     }, 
     module: { 
     loaders: [ 
      { 
      test: /\.vue$/, 
      loader: 'vue-loader' 
      }, 
      { 
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
      loader: 'file-loader', 
      query: { 
       limit: 10000, 
       name: '../img/[name].[hash:7].[ext]' 
      } 
      }, 
      { 
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
      loader: 'url-loader', 
      query: { 
       limit: 10000, 
       name: '../fonts/[name].[hash:7].[ext]' 
      } 
      } 
     ] 
     } 
    }, 
    webpackMiddleware: { 
     noInfo: true, 
    }, 
    coverageReporter: { 
     dir: './coverage', 
     reporters: [ 
     { type: 'lcov', subdir: '.' }, 
     { type: 'text-summary' }, 
     ] 
    }, 
    }); 
}; 

Answer 2

私はまったく同じ問題に遭遇しました。受け入れられた答えは私のために完全には機能しませんでした。以下は私の問題を解決：WebPACKの設定ファイルを（形式に注意してください）を作成します

npm install --save-dev vue-loader file-loader url-loader

：

1. はWebPACKのための関連ローダーをインストールします。受け入れられた答えは、webpack.config.jsファイルの無効な形式を引用してエラーを生成しました。少なくとも私と一緒でした。その後

webpack.config.js

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     use: [ 
      { loader: 'vue-loader' } 
     ] 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      query: { 
       limit: 10000, 
       name: '../img/[name].[hash:7].[ext]' 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      query: { 
       limit: 10000, 
       name: '../fonts/[name].[hash:7].[ext]' 
      } 
      } 
     ] 
     } 
    ] 
    } 
} 

karma.conf.js

// Karma configuration 

var webpackConf = require('./webpack.config.js'); 
delete webpackConf.entry 

module.exports = function(config) { 
    config.set({ 

     frameworks: ['jasmine'], 

     port: 9876, // web server port 

     colors: true, 

     logLevel: config.LOG_INFO, 

     reporters: ['progress'], // dots, progress 

     autoWatch: true, // enable/disable watching files & then run tests 

     browsers: ['Chrome'], //'PhantomJS', 'Firefox', 

     singleRun: true, // if true, Karma captures browsers, runs the tests and exits 

     concurrency: Infinity, // how many browser should be started simultaneous 

     webpack: webpackConf, // Pass your webpack.config.js file's content 

     webpackMiddleware: { 
      noInfo: true, 
      stats: 'errors-only' 
     }, 

     /** 
     * base path that will be used to resolve all patterns (eg. files, exclude) 
     * This should be your JS Folder where all source javascript 
     * files are located. 
     */ 
     basePath: './resources/assets/js/', 

     /** 
     * list of files/patterns to load in the browser 
     * The pattern just says load all files within a 
     * tests directory including subdirectories 
     **/ 
     files: [ 
      {pattern: 'tests/*.js', watched: false}, 
      {pattern: 'tests/**/*.js', watched: false} 
     ], 

     // list of files to exclude 
     exclude: [ 
     ], 

     /** 
     * pre-process matching files before serving them to the browser 
     * Add your App entry point as well as your Tests files which should be 
     * stored under the tests directory in your basePath also this expects 
     * you to save your tests with a .spec.js file extension. This assumes we 
     * are writing in ES6 and would run our file through babel before webpack. 
     */ 
     preprocessors: { 
      'app.js': ['webpack', 'babel'], 
      'tests/**/*.spec.js': ['babel', 'webpack'] 
     }, 
    }) 
} 

はkarma startを実行し、すべてが動作するはずです。