karma - webpack unit test environment in laravel

因為對 webpack 不熟，因此拿別人做好的設定檔來用
https://github.com/alhoqbani/laravel-mix-test

npm 相關套件版本變化很快，因此沒有沿用這專案的 package.json，大致進行了如下設定後即可以 karma 來進行 unit test

1. 將該專案的 resources/assets/tests 目錄下的所有檔案複製一份到自己專案下

2. 依該專案設定的 karma 設定檔內的需求，安裝相關的 node package, 大致如下
    karma mocha sourcemap
    sinon chai sinon-chai karma-sinon-mocha
    karma-mocha karma-spec-reporter karma-coverage
    karma-webpack karma-chrome-launcher

3. 更改 karma.conf.js 設定

plugins: [
    'karma-webpack',    'karma-coverage',    'karma-sourcemap-loader',    'karma-mocha',    'karma-spec-reporter',    'karma-chrome-launcher',    require('karma-mocha'),    require('karma-sinon-chai')
],

4. 更改 package.json

"test": "cross-env NODE_ENV=test karma start --config= resources/assets/tests/unit/karma.conf.js --single-run",

然後跑 npm test 即可以看到用 karma 以 resources/assets/tests/unit/specs/ 裡面的檔案設定來跑 unit test 的結果，預設是測試 resouces/assets/js/componments/Example.vue

該專案有改過 Example.vue 的內容，所以如果測試失敗可以複製該專案的 Example.vue 來測試。


設定過程中遇到的問題，主要就是要安裝相關的 node package，以及 karma.conf.js 的設定，其中曾經遇到 karma 一直吐出 "webpack not registered" 之類的訊息，花了一點時間才知道是 karma.conf.js 設定黨的關係。