I'm running some Karma tests using Intellij and one of them is failing. The stacktrace I get from the output seems to be giving me the lines in the Javascript and not the CoffeeScript, making it much harder for me to debug. Is there any way I can get the stacktrace lines to show up in their proper Coffeescript format?
1. Preprocessor Configuration
Make sure you have your preprocessor settings enabled in karma.conf.js.
preprocessors: {
'**/*.coffee': ['coffee']
},
coffeePreprocessor: {
options: {
bare: true,
sourceMap: true
},
transformPath: function(path) {
return path.replace(/\.js$/, '.coffee');
}
}
If your karma.conf is also in coffeescript (i.e. karma.conf.coffee), it would look like this:
preprocessors: '**/*.coffee': ['coffee']
coffeePreprocessor:
options:
bare: true
sourceMap: true
transformPath: (path) ->
path.replace /\.js$/, '.coffee'
2. Use Karma's Default Browser
Make sure you're using "Chrome" as your Karma browser (not PhantomJS). This is also specified in your karma config.
While PhantomJS does allow for mapping JS line numbers to Coffeescript line numbers, it doesn't do so properly at this time.
browsers: ['Chrome']
Related
I am trying to use a library (a node module I don't control) that contains this import in the packaged code
import _omit from 'lodash/omit';
and it does not work with nextjs12 and webpack5. I get this error
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data .Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/dev/project/node_modules/lodash/omit' imported from /Users/dev/project/node_modules/library/es/library.js
Did you mean to import lodash/omit.js?
The library has "type": "module" in it, which I think is the cause of this?
I have seen that you need to add fullySpecifed: false, to the webpack loaders, and I have tried that a few different ways.
In my next config, i have
experimental: { esmExternals: true, fullySpecified: false },
I also tried doing this to the config in the webpack function.
config.module.rules.push({
test: /\.m?js$/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
});
Is there something i am missing to make this work? It seems like it might have to do with the fact that this is during "collecting page data" and not "build"?
Node version: 14.16.0
yarn 1
I use webpack to collect and combine all my required JS libraries. I noticed that one of them (Markup.js) is missing from the final minified js file.
After some trial and error I traced the problem to this part of code:
plugins.push(new webpack.optimize.UglifyJsPlugin({
output: {
comments: true, // just for testing
},
compress: {
warnings: false,
},
// skip pre-minified libs
exclude: [/\.min\.js$/gi],
...
If I delete this part, the Markup.js library is part of the final (non-minified) JS file as expected. But when I use the uglify plugin, the Markup.js part is no longer there.
I though this might be because Markup.js is never "used" in the project source code, but using
compress: {
warnings: false,
unused: false,
dead_code: false,
},
makes no difference.
All I want is for the final file to have the same content as before, just minified. The uglify plugin should not make any assumptions about what parts of the code are really "needed".
How can I achieve this?
Im try to develop a react module with ES6 and couldn't find any generator for that, so i had to make it from a basic one. I was able to config almost everything, but im have a lot of problems try to configure karma, to test my module.
This is my karma.conf.js
// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-03-17 using
// generator-karma 0.9.0
module.exports = function(config) {
'use strict';
config.set({
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// base path, that will be used to resolve files and exclude
basePath: '../',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['commonjs', 'mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
'node_modules/react/react.js',
'lib/**/*.js',
'test/**/*.js'
],
preprocessors: {
'lib/**/*.cjsx': ['cjsx'],
'test/**/*.cjsx': ['cjsx'],
'lib/**/*.js': ['babel', 'commonjs'],
'test/**/*.js': ['babel', 'commonjs']
},
babelPreprocessor: {
options: {
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
},
// list of files / patterns to exclude
exclude: [
],
// web server port
port: 8080,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
'Chrome', 'PhantomJS'
],
// Which plugins to enable
plugins: [
'karma-commonjs',
'karma-cjsx-preprocessor',
'karma-babel-preprocessor',
'karma-phantomjs-launcher',
'karma-chrome-launcher',
'karma-mocha',
'karma-chai'
],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
colors: true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// Uncomment the following lines if you are using grunt's server to run the tests
// proxies: {
// '/': 'http://localhost:9000/'
// },
// URL root prevent conflicts with the site root
// urlRoot: '_karma_'
});
};
At this point i have the following error
Chrome 42.0.2311 (Mac OS X 10.10.2) ERROR
Uncaught ReferenceError: module is not defined
at /Users/admin/workspace/open_source/react-component-inspector/node_modules/react/react.js:1
and if i remove the react ref from files section i get this other error
PhantomJS 1.9.8 (Mac OS X) ERROR
Uncaught Error: Could not find module 'react' from '/Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js'
at /Users/admin/workspace/open_source/react-component-inspector/node_modules/karma-commonjs/client/commonjs_bridge.js:85
And if i remove the commonJS i get
PhantomJS 1.9.8 (Mac OS X) ERROR
ReferenceError: Can't find variable: exports
at /Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js:5
Or al least can anyone recommend me a yo generator with karma, ES6, jsx, to build a module, not a web app?
Thanks for the help
I believe you just need to add the react file's path to the list of preprocessor files. This is because the react file is also using the commonjs format just like your app's files, and when that file gets loaded in chrome, unlike node, the browser has no notion of where the "module" object came from. Updated excerpt from your code below.
// list of files / patterns to load in the browser
files: [
'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
'node_modules/react/react.js',
'lib/**/*.js',
'test/**/*.js'
],
preprocessors: {
// you can probably leave off babel here.
'node_modules/react/react.js': ['babel', 'commonjs'],
'lib/**/*.cjsx': ['cjsx'],
'test/**/*.cjsx': ['cjsx'],
'lib/**/*.js': ['babel', 'commonjs'],
'test/**/*.js': ['babel', 'commonjs']
},
I'd like to use batmanjs karma and rails on a current project. At the moment I'm attempting to use the batmanjs testing framework, but I'm having a heck of time getting everything to play together. Any help would be appreciateed.
http://batmanjs.org/docs/testing.html
class SimpleTest extends Batman.TestCase
#test 'A simple test', ->
#assert true
This file is sitting in spec/javascripts/simple_spec.js.coffee
Here's my Karma config, I'm assuming it's not accurate.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['requirejs'],
files: [QUNIT, QUNIT_ADAPTER,
{pattern: 'spec/javascripts/*.js.coffee', included: false}
],
exclude: [
],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome', 'PhantomJS'],
captureTimeout: 60000,
singleRun: false
});
};
Again, any help would be appreciated.
Somehow you need to get Batman.TestCase (and your application code) loaded by Karma. What I've done before is (gulp) point Karma at my development server, where it can get compiled assets. Maybe it ain't perfect, but it works.
Here's an example snippet for your Karma config:
files: [
'spec/javascripts/**/*.coffee',
'http://localhost:3000/assets/your_app.js', // loads application code
'http://localhost:3000/assets/extras/batman.test_case.js' // point to wherever TestCase code is!
]
Also,I wrote up a bit about how I've done it before (with Jasmine), in case that comes in handy: http://rmosolgo.github.io/blog/2014/01/18/batman-dot-js-testing-with-karma-and-jasmine/
As mentioned there, Batman.TestCase is an "extra", so you'll have to include it "by hand". It's not in the distributed version of Batman.js
Does that help at all? Good luck!
If I use RequireJS to optimize my whole project my main module will not get optimized/uglified if I use the setting skipDirOptimize: true. From my understanding everything should be optimized except the non-build layer JS files. Is this a bug or me not understanding the correct usage of this parameter?
Here is my requirejs config:
{
appDir: '../project',
mainConfigFile: '../project/assets/js/main.js',
dir: '../httpdocs',
optimize: "uglify",
//Introduced in 2.1.2: If using "dir" for an output directory, normally the
//optimize setting is used to optimize the build layers (the "modules"
//section of the config) and any other JS file in the directory. However, if
//the non-build layer JS files will not be loaded after a build, you can
//skip the optimization of those files, to speed up builds. Set this value
//to true if you want to skip optimizing those other non-build layer JS
//files.
skipDirOptimize: true,
generateSourceMaps: false,
normalizeDirDefines: "skip",
uglify: {
toplevel: true,
ascii_only: true,
beautify: false,
max_line_length: 1000,
defines: {
DEBUG: ['name', 'false']
},
no_mangle: false
},
optimizeCss: "standard",
removeCombined: true,
modules: [
{
name: '../main'
}
]
}
The use of the relative path in your module is probably causing r.js to not recognise it as a build bundle at the point where it decides whether or not to optimize it.
I had a similar problem (build bundles not being optimized), not with a relative module path but with a paths config to allow my modules to be named differently to my folder structure:
({
...
skipDirOptimize: true,
paths: {
'MyLibrary': ''
},
modules: [
{ name: 'MyLibrary/Main' }
],
...
})
This causes the module name in r.js (2.1.8) to become /Main, so when it builds its _buildPathToModuleIndex mapping, the key will be incorrect due to having two slashes (e.g. C:\dev\project\output\\Main).
The way that the optimization loop decides if a module is a build bundle (and hence needs optimization even when skipDirOptimize: true) is by looking it up in the _buildPathToModuleIndex mapping using its filename (e.g. C:\dev\project\output\Main). Due to it being in the map with two slashes, it won't find it. Therefore it won't be considered to be a build bundle and won't be optimized.
Try putting some console.logs in r.js where it builds and accesses _buildPathToModuleIndex to see what it's putting in and what it uses to look it up.
For my problem, the solution was to add a paths entry for 'MyLibrary/Main': 'Main' (repetition unfortunately). I'm not sure what your project structure is, but how about if you set baseUrl: '../ and then simply call your module main ?