Laravel + VueJs + Webpack + Karma =痛苦的世界

Question

如果您使用Laravel的Elixir进行webpack配置，是否可以为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

但是Karma配置文件需要一个webpack配置文件

webpack: webpackConfig, 

唯一的问题是Laravel的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没有做任何事情的错误。

ERROR in ./resources/assets/js/components/test.vue 
Module parse failed: /var/www/test/resources/assets/js/components/test.vue Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <template> 
|  <span >{{test}}</span> 
| </template> 

Answer 1

好吧，我得到了这个工作。几件事可能会有所帮助。

我原本是在运行gulp，并试图在我的流浪盒中运行测试，尝试匹配服务器配置。我认为这使得在互联网上找到例子和答案变得更加困难。

好的，所以我遇到的主要问题是webpack没有处理我的测试文件中包含的组件。我将lapack-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

我遇到了相同问题。我接受的答案并不完全适用于我。下面的解决我的问题：

1. 为的WebPack安装相关装载机：

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

2. 创建的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，一切都应该工作。