I'm running test coverage over my .js and .jsx files using karma, mocha, and isparta for ES6 code coverage.
For some reason the coverage report over .jsx files is corrupted.
See the following image:
The report looks the same for all of the .jsx files, i.e. from the line the JSX syntax appears - the coverage is corrupted, even though we can see the function has been visited once.
Here is my karma.conf.js file:
var path = require('path');
var isparta = require('isparta');
const babelOptions = {
presets: ['stage-0', 'react'],
plugins: [
'transform-es2015-modules-commonjs',
'transform-es2015-destructuring',
'transform-es2015-spread',
'transform-object-rest-spread',
'transform-class-properties'
]
};
module.exports = function (config) {
config.set({
browsers: [process.env.JENKINS_HOME ? 'Firefox' : 'Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack', 'sourcemap'],
'src/**/*.jsx': ['coverage']
},
reporters: ['progress', 'coverage'],
coverageReporter: {
dir: 'dist/coverage/',
reporters: [
{type: 'html'},
{type: 'text-summary'}
],
includeAllSources: true,
instrumenters: {isparta: isparta},
instrumenter: {
'**/*.js': 'isparta',
'**/*.jsx': 'isparta'
},
instrumenterOptions: {
isparta: {
babel: babelOptions,
embedSource: true,
noAutoWrap: true,
}
}
},
webpack: {
babel: babelOptions,
devtool: 'inline-source-map',
resolve: {
root: [path.resolve('.')],
alias: {
i18nJson: 'nfvo-utils/i18n/locale.json',
'nfvo-utils/RestAPIUtil.js': 'test-utils/mocks/RestAPIUtil.js',
'nfvo-utils': 'src/nfvo-utils',
'nfvo-components': 'src/nfvo-components',
'sdc-app': 'src/sdc-app'
}
},
module: {
preLoaders: [
{test: /\.js$/, exclude: /(src|node_modules)/, loader: 'eslint-loader'},
{test: /\.(js|jsx)$/, exclude: /(test|test\.js|node_modules)/, loader: 'isparta'}
],
loaders: [
{test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.json$/, loaders: ['json']},
{test: /\.(css|scss|png|jpg|svg|ttf|eot|otf|woff|woff2)(\?.*)?$/, loader: 'ignore-loader'},
]
},
eslint: {
configFile: './.eslintrc',
emitError: true,
emitWarning: true
},
},
webpackServer: {
noInfo: true
}
});
};
Please let me know if any further information is required, and I'll edit.
Related
This is a React app created using create-react-app (CRA) using antd (Ant Design). Existing project has been modified in attempt to server-side-rendering (SSR).
npm run build works just fine.
After that is when the error occurs. On npm start:
/Users/user/dev/reactappname/node_modules/antd/lib/style/index.less:1
#import './themes/index';
^
SyntaxError: Invalid or unexpected token
at Module._compile (internal/modules/cjs/loader.js:895:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
It's possible it's a webpack issue, but I'm not certain.
webpack.config.server.js:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './server.js',
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'build')
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.jsx', '.less']
},
target: 'node',
node: {
__dirname: false,
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
}, {
loader: 'css-loader'
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
publicPath: '/',
emitFile: false,
},
},
],
},
};
.babelrc:
{
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
[ "babel-plugin-transform-require-ignore",
{
"extensions": [".less", ".sass"]
}],
"#babel/plugin-proposal-class-properties",
"babel-plugin-root-import",
["import", { "libraryName": "antd", "style": true}]
]
}
This is webpack config for the server, so you need to emit your css/less/sass files to build/css by using MiniCssExtractPlugin in your webpack. Then on server-side, inject scripts that point to the css/less/sass files in build/css.
E.g. webpack config for plain css (you would need to add less support in your case)
{
test: /\.(css|less)$/i,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}
]
}
Let's assume this webpack would emit this file build/css/main.css. Then, your server.js looks like this:
app.use("*", (req, res) => {
let htmlData = fs.readFileSync("build/index.html", "utf8");
const cssData = fs.readFileSync("build/css/main.css", "utf8");
htmlData = htmlData.replace("</head>", `<style>${cssData}</style></head>`);
});
You will need to configure more for LESS if this is not enough for it to work.
I am trying to make my first JS unit test with Karma and Jasmin. I am testing a react app.
I generated the karma config with "karma init" and modified it, see below for the karma.config.js
The webpack.config is required in the karma.config.js, but the babel loader is completely ignored, why?
I noticed it's ignored as it resulted in errors of undefined variable, etc...
When adding parts of the webpack.config.js directly in the karma.config.js (copy/paste), it works, but that is not what I want as I am duplicating code like my loaders and aliases, etc... How to solve this? See below also the webpack.config.js
The karma.config.js:
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'src/js/',
frameworks: ['jasmine'],
files: [
'tests/*.test.js',
],
preprocessors: {
'**/tests/*.test.js': ['webpack', 'sourcemap'],
},
webpack: require("../webpack.conf.js"),
webpackMiddleware: {
stats: "errors-only"
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
phantomJsLauncher: {exitOnResourceError: true},
singleRun: false,
concurrency: Infinity
})
};
The webpack.config.js:
module.exports = function (env) {
if (env !== undefined) {
let analyse = !!env.analyse;
console.log("Analyse?: " + analyse);
if (analyse) {
plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'}));
}
}
return {
entry: {
entry: ['./src/entry.js', './src/js/utils.js'],
},
devtool: devTool,
devServer: devServer,
output: {
path: __dirname + '/dist',
filename: '[name]-[hash].cache.js', // it contains the name ".cache", that is used in the webserver config.
sourceMapFilename: '[name]-[hash].cache.js.map',
},
module: {
rules: [
{ // The Babel loader:
test: /(\.jsx|\.js)$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: ['babel-preset-es2015', 'babel-preset-react'].map(require.resolve),
plugins: ['babel-plugin-transform-react-jsx-img-import'].map(require.resolve) // It will convert the used images to to "require" statements such that it's used by a loader below.
}
}]
},
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|gif|jpe?g)$/,
use: [{
loader: 'file-loader',
options: {
name: 'resources/images/[name]-[hash]-cache.[ext]'
}
}]
},
{
test: /\.(otf|svg|eot|ttf|woff2?)(\?.*$|$)/,
use: [{
loader: 'file-loader',
options: {
name: 'resources/fonts/[name]-[hash]-cache.[ext]'
}
}]
},
]
},
plugins: plugins,
externals: ['axios'],
resolve: {
alias: {
// Ref: https://webpack.js.org/configuration/resolve/
Context: path.resolve(__dirname, 'src/js/context'),
Utils: path.resolve(__dirname, 'src/js/utils'),
....etc...
},
}
};
};
in karma.config.js:
webpack: require("../webpack.conf.js")
you're giving "webpack" a function instead of an object. you should immediately invoke it (with or without an env param) require("../webpack.conf.js")()
I received an the following error:
Cannot find module "../controllers/loginCtrl" when running karma, controller file in src/controllers, test file in src/tests
1) karma.conf.js:
var path = require('path');
var hasCoverage = global.process.argv.reduce(function (result, arg) {
return arg.indexOf('coverage') !== -1 || result;
});
var include = [
path.resolve('./src')
];
var preLoaders = hasCoverage ? [
// Process test code with Babel
{test: /\.spec\.js$/, loader: 'babel', include: include},
// Process all non-test code with Isparta
{test: /\.js$/, loader: 'isparta', include: include, exclude: /\.spec\.js$/}
] : [
{test: /\.js$/, loader: 'babel', include: include}
];
var loaders = [
{test: /\.sass$/, loader: 'style!css?sourceMap!sass?sourceMap&indentedSyntax=true'},
{test: /\.png$/, loader: 'null'},
{test: /\.jpg$/, loader: 'null'},
// Loader for JSON, may be used in some tests
{test: /\.json$/, loader: 'json'},
// Need some real loaders for HTML, because angular directives are coupled with templates
{test: /\.haml$/, loader: 'hamlc-loader'},
{test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]'}
];
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
'karma-babel-preprocessor',
'karma-jasmine',
'karma-webpack',
'karma-phantomjs-launcher',
'karma-chrome-launcher',
],
files: [
'spec.js',
],
webpack: {
devtool: 'eval',
module: {
loaders: loaders,
preLoaders: preLoaders
},
cache: true
},
webpackMiddleware: {
stats: {
chunkModules: false,
colors: true
}
},
preprocessors: {
'spec.js': ['webpack'],
},
babelPreprocessor: {
options: {
presets: ['es2015'],
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: true
});
};
2) spec.js:
var testsContext;
require('babel-polyfill');
require('angular');
require('angular-mocks');
testsContext = require.context('./src/', true, /\.spec\.js$/);
testsContext.keys().forEach(testsContext);
3) LoginCtrl.spec.js:
import LoginCtrl from '../controllers/loginCtrl';
describe('controller: LoginCtrl', function() {
let scope;
let ctrl;
beforeEach(function() {
angular.module('envio', [])
.controller('LoginCtrl', LoginCtrl);
});
beforeEach(angular.mock.module('envio'));
beforeEach(angular.mock.inject(function($controller, $rootScope) {
scope = $rootScope.$new();
ctrl = $controller('LoginCtrl', {
$scope: scope
});
}));
it('should set message to null', function() {
expect(ctrl).toBeDefined();
// expect(scope.message).toBeNull();
});
});
How can I prevent this error?
I got some webpack error says
ERROR in ./src/js/containers/App.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/chunza2542/Desktop/odnpoll/src/js/containers
# ./src/js/containers/App.js 13:11-32
I try to install resolve-url-loader NPM package. And I config webpack.config.js but I got the same error again.
This is my webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/main.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css?$/,
loaders: ['style-loader', 'css-loader', 'resolve-url']
},
{
test: /\.scss?$/,
exclude: /node_modules/,
loaders: [
'style-loader',
{
loader: 'css-loader',
query: {
sourcemap: true,
module: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: 'sass-loader',
query: {
outputStyle: 'expanded',
sourcemap: true
}
},
'resolve-url'
]
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
devServer:{
historyApiFallback: true
}
};
Thank for help.
EDIT
You can see my code & File Directory in this link
https://s24.postimg.org/dbk1txd05/Screen_Shot_2016_12_07_at_7_39_05_PM.png
Here is my webpack config:
{
entry: './public/static/js/app/app.js',
output: {
path: './public/static/dist/js/',
filename: 'app-compiled.js',
pathinfo: true
},
module: {
loaders: [
{
test: /public\/static.*\.js$/,
loader: 'babel-loader',
},
{
test: /\.html$/,
loader: 'raw'
},
],
},
plugins: [
new webpack.dependencies.LabeledModulesPlugin()
],
resolveLoader: {
alias: {
'text': 'raw',
},
root: ['./public/static/js/app']
},
resolve: {
extensions: ['', '.js'],
root: [
path.resolve('./public/static/js/app'),
],
modulesDirectories: ['node_modules'],
alias: {
'backbone': path.resolve('./public/static/js/lib/backbone.js'),
'backbone.relational': path.resolve('./public/static/js/lib/backbone-relational.js'),
'backbone.wreqr': path.resolve('./public/static/js/lib/backbone.wreqr.min.js'),
'marionette': path.resolve('./public/static/js/lib/marionette.js'),
'text': path.resolve('./public/static/js/lib/text.js'),
'smoke': path.resolve('./public/static/js/lib/smoke.js'),
'_': path.resolve('./public/static/js/lib/underscore.js'),
'underscore.inflection': path.resolve('./public/static/js/lib/underscore.inflection.js'),
'chosen': path.resolve('./public/static/js/lib/chosen.js'),
'spin': path.resolve('./public/static/js/lib/spin.min.js'),
'uuid': path.resolve('./public/static/js/lib/uuid-v4.min.js'),
'ladda': path.resolve('./public/static/js/lib/ladda.min.js'),
'jquery': path.resolve('./public/static/js/lib/jquery.js')
}
},
debug: true,
devtool: 'sourcemap',
};
The problem I am seeing in the browser is root is undefined. The compiled code that reads that is var previousBackbone = root.Backbone;
You should not need Babel to transpile node nodules such as Backbone. We want Webpack to use the pre-built javascript inside a given npm package. In not excluding the transpiling of node_modules, I expect Babel is making some optimisations to Backbone that it shouldn't. To exclude node_modules, add an exclude property to your babel loader e.g.
{
test: /public\/static.*\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}