Related
Is it possible to write unit tests for VueJs if you are using Laravel's Elixir for your webpack configuration?
VueJs 2x has a very simple example for a component test: Vue Guide Unit testing
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
and then...
// 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
})
and gives an example of a karma conf file here: https://github.com/vuejs-templates
But the Karma configuration file requires a webpack configuration file
webpack: webpackConfig,
The only problem is the Laravel's Elixir is creating the webpack configuration so it can't be included.
I have tried creating another webpack configuration file based on the example from https://github.com/vuejs-templates/webpack.
Something like this:
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'
}
and included it like...
// 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'
},
But I am getting errors that seem to indicate that webpack isn't doing anything.
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>
Ok, I got this to work. Couple of things that might help.
I was originally running gulp, and trying to run tests in my vagrant box, to try to match the server configuration. I think that makes it much harder to find examples and answers on the internet.
Ok, so the main problem I was having is that webpack wasn't processing my components included in my test files. I copied the webpack config out of the laravel-elixir-vue-2/index.js node module directly into the Karma configuration file and it started working.
The key is that karma-webpack plugin needs both the resolve and module loader configuration settings (resolve with alias and extensions) for it to work.
Hope this helps someone.
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' },
]
},
});
};
I ran into the exact same problem. The accepted answer did not fully work for me. The following solved my issue:
Install relevant loaders for webpack:
npm install --save-dev vue-loader file-loader url-loader
Create webpack config file (note the format). The accepted answer produced errors citing invalid format of the webpack.config.js file. At least with me it did.
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']
},
})
}
Then run karma start and everything should work.
I'm having a hard time loading a sass file with webpack2.
At least I think that's the problem because if I comment out the sass loading row the error doesn't appear.
This is how I load the sass file from App.jsx require('./../../style/style.scss')
I get the following error:
ERROR in ./src/components/App.jsx
Module not found: Error: Can't resolve '' in '/Users/user/code/my_site.com'
resolve '' in '/Users/user/code/my_site.com'
using description file: /Users/user/code/my_site.com/package.json (relative path: .)
after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
using description file: /Users/user/code/my_site.com/package.json (relative path: .)
no extension
/Users/user/code/my_site.com is not a file
.js
/Users/user/code/my_site.com.js doesn't exist
.json
/Users/user/code/my_site.com.json doesn't exist
as directory
existing directory
using path: /Users/user/code/my_site.com/index
using description file: /Users/user/code/my_site.com/package.json (relative path: ./index)
no extension
/Users/user/code/my_site.com/index doesn't exist
.js
/Users/user/code/my_site.com/index.js doesn't exist
.json
/Users/user/code/my_site.com/index.json doesn't exist
use ./index.js from main in package.json
using description file: /Users/user/code/my_site.com/package.json (relative path: .)
after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
using description file: /Users/user/code/my_site.com/package.json (relative path: ./index.js)
as directory
/Users/user/code/my_site.com/index.js doesn't exist
no extension
/Users/user/code/my_site.com/index.js doesn't exist
.js
/Users/user/code/my_site.com/index.js.js doesn't exist
.json
/Users/user/code/my_site.com/index.js.json doesn't exist
[/Users/user/code/my_site.com]
[/Users/user/code/my_site.com.js]
[/Users/user/code/my_site.com.json]
[/Users/user/code/my_site.com/index]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.json]
[/Users/user/code/my_site.com/index.js.js]
[/Users/user/code/my_site.com/index.js.json]
# ./src/components/App.jsx 33:0-35
# ./src/index.jsx
# multi ./src/index.jsx ./src/index.jsx
My webpack.config:
var webpack = require("webpack")
var path = require("path")
module.exports = {
entry: './src/index.jsx',
output: { path: path.join(__dirname, "./build/"), filename: 'bundle.js' },
devtool: 'source-map',
module: {
loaders: [
{ test: /^((?!config).)*\.jsx?$/, loader: 'babel-loader',
exclude: /node-modules/,
query: { presets: ['es2015', 'react'] }
},
{ test: /\.css$/, loader: 'style-loader!css-loader!' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader!?sourceMap=true' },
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
]
}
}
I also tried using the new rules: ... - use: ... syntax but without luck.
Maybe I'm missing something on how loaders work?
You can chain multiple loaders by separating them with a !. For instance style-loader!css-loader would pass it through both css-loader and style-loader. Note that there is no ! after the last loader. So by adding that trailing ! you tell webpack that whatever comes after it, is a loader, which is the empty string.
For your .css files it's immediately noticeable, but in your .scss config it is much more subtle because you add an option with the ?sourceMap=true. To fix your problem you need to remove the ! after the last loader:
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap=true' },
Webpack 2 now also provides the possibility to specify a list of loaders, which makes it much easier to read https://webpack.js.org/guides/migrating/#chaining-loaders
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader?sourceMap=true']
},
Additionally this allows you to specify options as a JavaScript object instead of having to convert it to a string. So your .scss loader can be written as:
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
As shown in https://webpack.js.org/guides/migrating/#what-are-options-
I am working on application that needs to be run on IE 8 enterprise version.I am getting following errors in the console:
Expected identifier : ;
indexOf is not available for the object.
For solving this I read this question on stackoverflow:
Babel 6.0.20 Modules feature not work in IE8
It suggests
transform-es3-member-expression-literals
transform-es3-property-literals
to be added.
But using this in webpack is not mentioned any where,not on babel official site.
Can anyone suggest the way how can I use it as a plugin to my project.
Note:I have already tried doing
var es3MemberExpressionLiterals = require('babel-plugin-transform-es3-member-expression-literals');
var es3PropertyLiterals = require('babel-plugin-transform-es3-property-literals');
plugins = [// Plugins for Webpack
new webpack.optimize.UglifyJsPlugin({minimize: false}),
new HtmlWebpackPlugin({
template: 'index.html', // Move the index.html file...
minify: { // Minifying it while it is parsed using the following, self–explanatory options
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: false,
useShortDoctype: false,
removeEmptyAttributes: false,
removeStyleLinkTypeAttributes: false,
keepClosingSlash: true,
minifyJS: false,
minifyCSS: true,
minifyURLs: false
}
})
new es3MemberExpressionLiterals(),
new es3PropertyLiterals()
];
I've created a demo repository on github to show the full configuration by an example.
To get the two plugins running create a .babelrc file, with the following content
{
"plugins": [
"transform-es3-member-expression-literals",
"transform-es3-property-literals"
]
}
In the standard configuration babel-loader in your webpack.config.js babel takes a look into the .babelrc to configure plugins.
// webpack.config.js (partial code only)
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
If everything is set up correctly webpack should transform the following code
// src/main.js
var foo = { catch: function() {} };
console.log(foo.catch)
into
// bundle.js
/* 0 */
/***/ function(module, exports) {
var foo = { "catch": function () {} };
console.log(foo["catch"]);
/***/ }
See also the examples for the plugins: babel-plugin-transform-es3-property-literals and babel-plugin-transform-es3-member-expression-literals.
The question you link to is about Babel plugins, and you are trying to pass them as Webpack plugins. You'd need to set up Babel as a loader for your application and pass the plugins to that. Merge the following into your Webpack configuration.
module: {
loaders: [{
loader: 'babel',
test: /\.js$/,
exclude: /node_modules/,
plugins: [
'babel-plugin-transform-es3-member-expression-literals',
'babel-plugin-transform-es3-property-literals',
],
}],
},
I'm using font-awesome from NPM and trying to use it with webpack. But, I get an error that the fonts can't be found. The fonts reside under ~/Projects/GrailLuck/node_modules/font-awesome/fonts.
I import font-awesome in my sass file like so:
#import "~font-awesome/css/font-awesome";
My loaders:
loaders: [
{
test: /\.js$/,
exclude: /node_modules|app.js/,
loader: "babel-loader",
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
include: [ path.resolve(__dirname, "src", "sass") ],
loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib')
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}]
And here is the error I'm getting:
ERROR in ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compas
s-mixins/lib!./src/sass/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /home/spo
ck/Projects/GrailLuck/web/src/sass
# ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compass-mixi
ns/lib!./src/sass/app.scss 6:10469-10520
There's multiple errors the same as the above. One for each font type.
Any ideas how to get this working?
I found out there's a package called font-awesome-sass-loader. Works perfectly and doesn't feel hackish like other solutions around the web.
I have this loader in my webpack loader array:
{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('style-loader', 'css-loader!sass-loader') }
I am trying to have webpack build my SCSS to CSS but I am getting this error:
/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60
throw new Error("Element from loaders list should have one of the fields 'loader' or 'loaders'");
^
Error: Element from loaders list should have one of the fields 'loader' or 'loaders'
at getLoadersFromObject (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:60:8)
at LoadersList.<anonymous> (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:78:12)
at Array.map (native)
at LoadersList.match (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:70:19)
at NormalModuleFactory.<anonymous> (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/lib/NormalModuleFactory.js:109:65)
at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:697:13
at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:52:16
at done (/Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:248:21)
at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:44:16
at /Users/bli1/Development/Django/CL/cherngloong/cherngloong/cherngloong/node_modules/webpack/node_modules/async/lib/async.js:694:17
Here is my full webpack config:
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
'./app/index'
],
output: {
path: path.resolve('./public/bundles/'),
filename: "[name]-[hash].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{ test: /\.css$/, exclude: /node_modules/, loader: 'style!css' },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin('style-loader', 'css-loader!sass-loader') }
]
},
}
Sokra has provided an example of how to use the ExtractTextPlugin here: https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
As you can see, there are some differences between your example and his.
The ExtractTextPlugin constructor is called with new inside the "plugins: [ ]" array
The way the plugin is used in the loaders array is by calling the static method .extract(), rather than simply calling the plugin constructor
The reference in the "loader object" is for the "loader:" property, rather than "loaders:" as you have put (loaders is an option but expects an array)
Hope that helps!