Karma Coverage (Jasmine, Babel, Webpack) - karma-jasmine

After making changes to my karma.conf.js to allow for Karma Coverage, running karma now fails. I'm not really sure what is going on. Any thoughts?
process.env.NODE_ENV = 'test';
module.exports = function(config) {
config.set({
autoWatch: true,
browsers: ['Chrome'], //, 'Firefox', 'Safari'],
frameworks: ['jasmine'],
logLevel: config.LOG_INFO,
singleRun: false,
port: 9876,
colors: true,
concurrency: Infinity, // how many browser should be started simultaneous
files: [
'test/**/*Spec.js',
'src/**/*.js' //ADDED FOR COVERAGE
],
preprocessors: {
'test/**/*Spec.js' : ['babel', 'webpack', 'sourcemap'],
'src/**/*.js' : ['babel', 'webpack', 'sourcemap', 'coverage'] //ADDED FOR COVERAGE
},
reporters: ['progress', 'coverage'], //ADDED FOR COVERAGE
coverageReporter: { //ADDED FOR COVERAGE
type : 'html',
dir : 'coverage/'
},
webpack: {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: [
'node_modules'
]
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
},
webpackServer: {
noInfo: true //don't spam the console when running in karma!
},
plugins: [
"karma-babel-preprocessor",
"karma-chrome-launcher",
"karma-webpack",
"karma-sourcemap-loader",
"karma-jasmine",
'karma-coverage' //ADDED FOR COVERAGE
],
babelPreprocessor: {
options: {
presets: [
"latest",
"react-app"
],
sourceMap: 'inline',
plugins: [
"transform-object-rest-spread"
]
}
}
})
}
I'm getting the following error (and many more similar below this)
27 12 2016 06:35:35.997:ERROR [karma]: { Error: no such file or directory
at MemoryFileSystem.readFileSync (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/memory-fs/lib/MemoryFileSystem.js:114:10)
at MemoryFileSystem.readFile (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
at doRead (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/karma-webpack/lib/karma-webpack.js:201:29)
at Plugin.readFile (/Users/lancepoehler/Documents/workspaces/SolarAnalysisClient/node_modules/karma-webpack/lib/karma-webpack.js:205:5)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
code: 'ENOENT',
errno: 34,
message: 'no such file or directory',
path: '/_karma_webpack_/src/components/Error.js' }

Related

Can't create code coverage for VUE files with karma, webpack and typescript

I am trying to create code coverage for VUE files using typescript in karma and webpack.
I am using istanbul-instrumenter-loader as a post process after but keep getting.
Everything works okay for pure .ts files, but when incluiding vue files I get
build failed (from ./node_modules/istanbul-instrumenter-loader/dist/cjs.js):
TypeError: Cannot read property 'fileCoverage' of undefined
When debugging istanbul-instrumenter-loader I noticed that
ee.exit(path); is undefined because the VUE files are being instrumented 3 times, the first two work okay but the third one is the one that crashes.
this is my webpack config
module.exports = {
node: {
fs: 'empty'
},
mode: 'development',
devtool: 'inline-source-map',
stats: 'verbose',
resolve: {
alias: {
Home: path.resolve( __dirname ),
Client: path.resolve( __dirname, 'client/' ),
ClientUtils$: path.resolve( __dirname, 'client/utils/index.utils.client.ts' ),
Views: path.resolve( __dirname, 'client/views/' ),
Components: path.resolve( __dirname, 'client/components/' ),
Constants$: path.resolve( buildPath, 'shared/constants.js' )
},
extensions: [
'.scss',
'.js',
'.ts',
'.vue'
]
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.ts?$/,
exclude: /node_modules/,
use: [
{
loader: 'cache-loader'
},
{
loader: 'thread-loader',
options: {
workers: Math.max(require('os').cpus().length - 1, 1)
}
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: true,
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
{
test: /\.js$/,
exclude: [/dist/, /node_modules/, /coverage_server/, /coverage_client/],
loader: 'babel-loader'
},
{
test: /\.ts$/,
include: [/client/],
exclude: [
/node_modules/,
/\.spec\.ts$/,
/server/
],
enforce: 'post',
loader: 'istanbul-instrumenter-loader',
options: {
esModules: true
}
},
{
test: /\.(s*)css$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
};
and my karma.conf is
module.exports = function(config) {
let files = [];
if (config.grep) {
files.push({ pattern: config.grep, type: 'module' });
} else {
files.push('client/index.client.spec.ts');
}
config.set({
frameworks: ["mocha", "chai", "sinon"],
files,
preprocessors: {
'client/**/*spec.ts': ['webpack', 'sourcemap']
},
webpack: require('./webpack.test.js'),
reporters: ['spec', 'dots', 'html', 'coverage-istanbul'],
browsers: ['ChromeHeadless'],
coverageReporter: {
dir: './coverage_client',
includeAllSources: true,
reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text' }]
},
coverageIstanbulReporter: {
reports: ['text', 'lcov' ],
dir: './coverage_client',
fixWebpackSourcePaths: true,
'report-config': {
html: { outdir: 'html' }
}
},
htmlReporter: {
outputDir: 'karma_client_html', // where to put the reports
templatePath: null, // set if you moved jasmine_template.html
focusOnFailures: true, // reports show failures on start
namedFiles: false, // name files instead of creating sub-directories
pageTitle: null, // page title for reports; browser info by default
urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
reportName: 'report_summary_filename', // report summary filename; browser info by default
// experimental
preserveDescribeNesting: false, // folded suites stay folded
foldAll: false // reports start folded (only with preserveDescribeNesting)
}
});
};
and my tsconfig is
{
"compilerOptions": {
"incremental": true,
"outDir": "./build/",
"target": "es2018",
"module": "CommonJS",
"lib": ["es2018", "dom", "dom.iterable"],
"allowSyntheticDefaultImports": true,
"inlineSourceMap": true,
"sourceMap": false,
"noImplicitAny": false,
"strict": true,
"alwaysStrict": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"types": [ "node", "mocha", "chai" ],
"baseUrl": ".",
"paths": {
"type-graphql": ["./node_modules/type-graphql/dist/browser-shim.ts"],
"Client/*": ["./client/*"],
"ClientUtils": ["./client/utils/index.utils.client.js"],
"Views/*": ["./client/views/"],
"Components/*": ["./client/components/*"],
"Constants": ["./shared/constants.ts"]
}
},
"include": [
"./client/**/*.ts",
"./client/**/*.vue",
"./server/**/*.ts",
"./shared/**/*.ts"
],
"exclude": [
"**/*.spec.ts",
"node_modules"
],
"files": ["./vue-shims.d.ts"]
}

How to define the right Preset When using Nuxt in order to run on IE

I'm trying to run my VueJS + Nuxt app on IE and get the following error:
'Unable to get property 'call' of undefined or null reference'
This happens in the following line:
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
when moduleID = "./node_modules/webpack-hot-middleware/client.js?name=client&reload=true&timeout=30000&path=/__webpack_hmr"
I think it has something to do with the way I configure my presets when using Nuxt.
This is currently how nuxt.config.js build part looks like:
build: {
vendor: ['vuetify', 'babel-polyfill', 'vued3tree', 'vue2-editor','lodash'],
extractCSS: true,
babel: {
presets: [
['es2015'],
[
'vue-app',
{
useBuiltIns: true,
targets: { ie: 11, uglify: true },
},
],
],
},
How do I need to configure my presets in order for my app to run on IE?
solved that as well by removing a library called vue2-hammer. Now I have one issue in Chrome and in IE: 'regeneratorRuntime is not defined'. tried every solution in Google and no solution. Now my Nuxt.config.js looks like this:
const polyfill = require('#babel/polyfill');
module.exports = {
entry: [polyfill],
build: {
extractCSS: true,
extend(config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.module.rules.push(
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
plugins: [
[
'#babel/plugin-transform-runtime',
{
corejs: false,
helpers: true,
regenerator: true,
useESModules: false,
},
],
[
'#babel/plugin-transform-regenerator',
{
asyncGenerators: false,
generators: false,
async: false,
},
],
'babel-plugin-transform-es2015-shorthand-properties',
'#babel/plugin-transform-exponentiation-operator',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-arrow-functions',
],
},
},
);
}
},
},
babel: {
presets: [
[
'es2015',
'stage-0',
],
],
exclude: ['transform-regenerator'],
},
Ant idea what can cause this?

vuejs CLI erroro with awesome font

I am working vue CLI webpack setup and installed the awesome font package via npm. In the in the main.js i imported the font:
import 'vuetify/dist/vuetify.min.css'
i got the following error:
./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.css 7:684-735
# ./node_modules/font-awesome/css/font-awesome.css
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
and heres the standard webpack config file:
any ideas how to use the right loader?
regards
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: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// 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'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
You don't need to plug vue-style-loader for css loading. This is an internal loader used by vue-loader.
rules: [
{
test: /\.css$/,
use: [
- 'vue-style-loader',
'css-loader'
],
}, {
You also need a loader for ttf file:
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use:[ { loader: "url-loader", options: {limit: 10000, mimetype: 'application/octet-stream'} }]
},
font-awsome will also require loader for woff file:
{
test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
use:[ { loader: "url-loader", options: {limit: 10000, mimetype: 'application/font-woff'} }]
},

Webpack unable to find the correct modules

I cannot figure out why the paths are so wrong when finding node modules. Here's my /webpack-dev-server.js
const chalk = require('chalk');
const webpack = require('webpack');
const env = require('../server/environment');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.development.js');
const server = new WebpackDevServer(webpack(webpackConfig), {
publicPath: '/client',
contentBase: '/client',
inline: true,
hot: true,
compress: true,
stats: false,
quiet: true,
noInfo: true,
lazy: false,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
},
proxy: {
"*": 'http://localhost:3000'
}
});
server.listen(env.WEBPACK_PORT, 'localhost', (err) => {
if (err) {
console.log(chalk.red(err));
}
console.log(chalk.yellow(`Webpack server listening on http://localhost:${env.WEBPACK_PORT}`));
});
which includes the basic webpack development setup. When I start up the webpack-dev-server above, I get the following error in the console:
AppContainer.scss?048e:4Uncaught Error: Cannot find module "!!./../../../node_modules/css-loader/index.js?modules!./../../../node_modules/autoprefixer-loader/index.js!./../../../node_modules/sass-loader/index.js!./AppContainer.scss"
I see the paths to the node_modules are incorrect. What's strange is that if I run an Express server and simply require the webpack-dev-server it works...
Here's my webpack config:
import path from 'path';
import webpack from 'webpack';
import env from '../server/environment';
export default {
target: 'web',
devtool: 'cheap-module-eval-source-map',
entry: [
`webpack-dev-server/client?http://localhost:${env.WEBPACK_PORT}`,
'webpack/hot/dev-server',
'babel-polyfill',
'./client/index'
],
output: {
path: path.join(__dirname, '../client'),
pathInfo: true,
publicPath: `http://localhost:${env.WEBPACK_PORT}/client/`,
filename: 'index.js'
},
resolve: {
root: path.join(__dirname, '..'),
modulesDirectories: [
'node_modules',
'client'
],
extensions: ['', '.json', '.js']
},
plugins: [
new webpack.DefinePlugin({
__DEV__: env.isDev,
__PRODUCTION__: env.isProd,
__TOKEN_KEY__: JSON.stringify(env.TOKEN_KEY),
__ENV__: JSON.stringify(env.ENV)
}),
new webpack.HotModuleReplacementPlugin()
],
module: {
noParse: /\.min\.js/,
loaders: [
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=image/svg+xml'
},
{ test: /\.(jpe?g|png|gif)$/i, loaders: ['file'] },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.json$/, loader: 'json' },
{ test: /\.scss$/, loader: 'style!css?modules!autoprefixer!sass' },
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
}
]
}
};
I needed to correctly extend the base config class.

Karma,Jasmine,JSPM, Babel base.preset error

I am trying to use Karma, Jasmine, JSPM, and Babel all together. It seems I am getting an error I am not sure how to trace:
12 04 2016 19:59:04.407:ERROR [preprocessor.babel]: [BABEL] /Users/allen/work/twentytwenty.qualboard/src/TwentyTwenty.QualBoard.Web/wwwroot/config.js: Unknown option: base.preset. Check out http://babeljs.io/docs/usage/options/ for more info
It barks about config.js and the option base.preset. I am not sure why thought I have done a complete project search for base.preset and cannot find its existence.
Karma Config:
module.exports = function(config) {
config.set({
autoWatch: false,
babelPreprocessor: {
options: {
preset: ['es2015'],
sourceMap: 'inline',
},
},
basePath: '',
browsers: [
'PhantomJS',
],
colors: true,
concurrency: Infinity,
coverageReporter: {
type: 'html',
dir: 'converage/',
},
exclude: [],
files: [],
frameworks: [
'jspm',
'jasmine',
],
jspm: {
config: './wwwroot/config.js',
packages: './wwwroot/jspm_packages',
loadFiles: [
'test/**/*.js',
],
serveFiles: [
'test/**/*.js',
],
},
logLevel: config.LOG_INFO,
plugins: [
'karma-babel-preprocessor',
'karma-coverage',
'karma-jasmine',
'karma-jspm',
'karma-phantomjs-launcher',
'karma-spec-reporter',
],
port: 9876,
preprocessors: {
'./wwwroot/config.js': ['babel'],
'./wwwroot/aurelia/**/*.js': ['babel'],
'./wwwroot/test/**/*.js': ['babel', 'coverage'],
},
proxies: {
'/wwwroot/': '/TwentyTwenty.Qualboard.Web/wwwroot/',
'/jspm_packages/': '/wwwroot/jspm_packages',
},
reporters: [
'coverage',
'spec',
],
singleRun: true,
specReporter: {
maxLogLines: 1,
suppressErrorSummary: true,
suppressFailed: false,
suppressPassed: false,
supressSkipped: false,
},
});
};
My BabelRc:
{
"presets": ["es2015"]
}
I am starting Karma in the terminal by doing:
karma start
What am I missing?
You have a typo, it is presets and not preset:
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline',
},
}