JASMINE not defined when I try to run Karma test runner - gruntjs

I am trying to hook up the Karma test runner, using this seed project as a model.
I pull the seed project in, build it, and the test runner works great.
When I edit the karma.conf.js config file to start including the files from my project, and move it to my current setup (outside the seed project), I get this error:
Running "karma:dev" (karma) task
ERROR [config]: Error in config file!
[ReferenceError: JASMINE is not defined]
ReferenceError: JASMINE is not defined
at module.exports (C:\dev_AD_2014.01_PHASE1\config\karma-dev.conf.js:4:7)
...
I think I see what it's complaining about... in the seed project, it's karma config file is of an older format, that must have JASMINE and JASMINE_ADAPTER defined somewhere:
Seed Project karma config snippet
files = [
JASMINE,
JASMINE_ADAPTER,
'../app/lib/angular/angular.js',
'lib/angular/angular-mocks.js',
'../app/js/*.js',
....
];
exclude = ['karma.conf.js'];
...
My newer setup uses all the latest grunt plugins, and wants the config file wrapped in a module definition like so:
My karma config snippet
module.exports = function(config) {
config.set({
files: [
JASMINE,
JASMINE_ADAPTER,
// library and vendor files
'../dev/vendor/**/*.js'
'../dev/app/**/*.js'
],
exclude: ['**/*.e2e.js', '../config/*.js'],
reporters: ['progress'],
...
So it seems the problem is clear: the newer version(s) of some grunt plugins expect the modular definition, but are longer is setting up JASMINE, etc, as variables that are defined. That's my guess, but I'm a little lost on how to resolve this. I don't want to use the version of Karma that comes with the seed project if I can help it... I think it's version 0.4.4. I believe the newest stable version is 0.10.x.
What am I doing wrong?
Thanks!

If you want to use the latest stable Karma version (0.10.9) you should define Jasmine in the frameworks section and be sure to have karma-jasmine in the plugins section, in your karma configuration file.
Here's an example config file:
karma.conf.js
module.exports = function(config){
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// list of files / patterns to load in the browser
files: [
{pattern: 'app/**/*.js', watched: true, included: true, served: true}
],
// list of files to exclude
exclude: [
],
preprocessors: {
},
proxies: {
},
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
autoWatch: true,
// frameworks to use
frameworks: ['jasmine'],
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
'Chrome'
],
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-script-launcher',
'karma-jasmine'
],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
Source: Karma-runner docs

Including JASMINE and JASMINE_ADAPTER in the files array is applicable to Karma versions 0.8.x and down. With newer versions of Karma, that is version 0.13 currently, just remove those 2 lines from the files array since you are already loading Jasmine as the framework(framework=['jamsine']).

Related

Why is eslint not working after migrating from CRA to Next.js?

I am currently working on migrating an app from CRA to Next.js. Eslint was working beautifully when using CRA (eslint works out-of-the-box).
I want to use the same CRA linting rules in the Next.js app so I installed eslint-config-react-app. I followed the instructions as provided on the NPM page: https://www.npmjs.com/package/eslint-config-react-app:
npm install --save-dev eslint-config-react-app #typescript-eslint/eslint-plugin#^4.0.0 #typescript-eslint/parser#^4.0.0 babel-eslint#^10.0.0 eslint#^7.5.0 eslint-plugin-flowtype#^5.2.0 eslint-plugin-import#^2.22.0 eslint-plugin-jsx-a11y#^6.3.1 eslint-plugin-react#^7.20.3 eslint-plugin-react-hooks#^4.0.8
create the .eslintrc.json file with the following content:
{ "extends": "react-app" }
However, the linting is not showing up neither in the development console nor in the browser console.
Thanks!
Ok so I found the solution.
I wanted the eslint output to show up in the console when saving edits to a file directly (just like with CRA). Initially, I did not realize that Next.js has no eslint plugin/loader specified in their webpack config so I extended theirs by adding my own. Now everything works as expected, just like it did when using CRA.
I actually used (although slightly modified) CRA's config for the eslint-webpack-plugin plugin. If anyone else wants to have an eslint setup in Next.js similar to CRA, add the following to your next.config.js file:
const path = require('path');
const fs = require('fs');
const ESLintPlugin = require('eslint-webpack-plugin')
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
webpack(config) {
config.plugins.push(new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
eslintPath: require.resolve('eslint'),
context: resolveApp('src'),
cache: true,
cacheLocation: path.resolve(
resolveApp('node_modules'),
'.cache/.eslintcache'
),
// ESLint class options
cwd: resolveApp('.'),
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {},
},
}))
return config
}
}
Note, that when using the above you will need to install eslint-config-react-app and its dependencies (see: https://www.npmjs.com/package/eslint-config-react-app).
Finally, note that since Next.js only renders (compiles) a page when it is needed in development, eslint will only run on a page when it is displayed in the browser as pointed out here: https://github.com/vercel/next.js/issues/9904. This makes adding the following script to package.json as suggested by Roman very useful if you want to do a "full-scan" of your project.
"lint": "eslint ."
You can add a command like this in the scripts section of your package.json:
"lint": "eslint ."
And then you can check your eslint results by running:
npm run lint

CSS loader error with webpack v3 after editing a webpack watched file in a server-side app

I am working on a node express api which is building a view via react and CSS modules (one CSS file within each component imported directly into the component). The react output is serialised with renderToStaticMarkup() which will be sent back to the requester in the JSON response. I also intend to send the compiled CSS in this response too.
I have a working build process via webpack which bundles my server app to one file. I am also currently bundling my CSS (modules) into one file (with the intention of reading this in later).
I am using webpack with its watch facility as follows (can't use webpack-dev-server as the api requires POST and there is no 'page' to update anyway):
cross-env NODE_ENV=development webpack -w --colors
My issue however is that whilst this all works fine on first compile, as soon as I change any file, I get a webpack error stating that I need an appropriate loader for the imported CSS file.
ERROR in ./src/app/components/Suggestions/Suggestions.css
Module parse failed: /home/me/myproject/src/app/components/Suggestions/Suggestions.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .suggestions {
| background: blue;
| color: orange;
# ./src/app/components/Suggestions/Suggestions.js 11:19-47
# ./src/app/components/Suggestions/index.js
# ./src/server/middleware/buildSuggestions.js
# ./src/server/routes/index.js
# ./src/server/server.js
# multi babel-polyfill ./src/server/server.js
I have simplified my webpack config as much as possible and still get the issue. My simplified config (not extracting css to file and no PostCSS) is as follows:
webpack.config.babel.js
import path from 'path';
import nodeExternals from 'webpack-node-externals';
import PATHS from './config/paths';
// Host and port settings to spawn the dev server on
const HOST = 'localhost';
const PORT = 3000;
const LOCAL = `http://${HOST}:${PORT}`;
const DEV = process.env.NODE_ENV === 'development';
let serverConfig = {
entry: [
"babel-polyfill",
path.resolve(PATHS.src, 'server/server.js'),
],
output: {
filename: 'server.js',
path: PATHS.dist,
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: PATHS.src,
use: {
loader: 'babel-loader',
options: {
// babelrc at project root only for compiling this webpack
babelrc: false,
presets: [
'env',
'react'
],
plugins: [
'transform-object-rest-spread',
'syntax-dynamic-import',
'transform-class-properties',
]
}
}
},
{
test: /\.css$/,
use: [
{
loader : 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]-[hash:base64]',
sourceMap: DEV
},
}
]
}
],
},
plugins: [
],
target: 'node',
externals: [nodeExternals()]
};
export default serverConfig;
So my question is, why does this work okay on first compile but not on a recompile after a change?
Stranger than fiction!
So I realised that if I run my build without the watcher...
cross-env NODE_ENV=development webpack --colors
and that process had ended, if I edited a file I still saw the error!!! Even though there was supposedly no watcher running. I left that terminal window alone with no running process, opened another terminal and edited a file within my src directory using vi (closed WebStorm in case it had some odd watcher running). Incredibly, the error popped up again in the original terminal window!!!
So it seems my issue was caused by a rogue webpack watch process that hadn't been killed properly. Couldn't find the process to manually kill it so had to do reboot. Literally hours lost on this bizzare issue. At least my whole build process is working again.

Looking for Modernizr references

I'm trying to use the grunt-modernizr plugin in my project but I'm receiving the following output when I run tasks:
Running "modernizr:dist" (modernizr) task
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
I'm not receiving any type of error the terminal just goes back to the directory that I'm in, as if it's just giving up.
Here is my grunt file:
module.exports = function(grunt) {
grunt.initConfig ({
// Do grunt-related things in here
pkg: grunt.file.readJSON('package.json'),
modernizr: {
dist: {
"dest": "javascripts/modernizr-custom.js",
"parseFiles": true,
"customTests": [],
"devFile": "javascripts/modernizr-custom.js",
"outputFile": "javascripts/min/modernizr-custom.min.js",
"tests": [
"pointerevents",
"css/pointerevents"
],
"extensibility": [
"setClasses"
],
"uglify": false
}
},
cssmin: {
target: {
files: {
'css/min/bootstrap.min.css': ['css/bootstrap.css']
}
}
},
});
grunt.loadNpmTasks("grunt-modernizr");
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['modernizr', 'cssmin']);
};
Output from running grunt --verbose:
Initializing
Command-line options: --verbose
Reading "gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Registering "grunt-modernizr" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-modernizr/package.json...OK
Loading "modernizr.js" tasks...OK
+ modernizr
Registering "grunt-contrib-cssmin" local Npm module tasks.
Reading /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Parsing /Applications/MAMP/htdocs/bootstrap-three-wordpress/wp-content/themes/brandozz/node_modules/grunt-contrib-cssmin/package.json...OK
Loading "cssmin.js" tasks...OK
+ cssmin
Loading "gruntfile.js" tasks...OK
+ default
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Running "modernizr" task
Running "modernizr:dist" (modernizr) task
Verifying property modernizr.dist exists in config...OK
Files: -> javascripts/modernizr-custom.js
Verifying property modernizr exists in config...OK
>> Explicitly including these tests:
>> pointerevents
Looking for Modernizr references
This is something I just came across too and seems to be grunt-modernizr stopping after customizr doesn't find any files to crawl (it crawls by default).
If you add "crawl": false to your modernizr:dist task that should fix the problem.
Also, I think "extensibility": [ "setClasses" ], should be "options": [ "setClasses" ],.
To use the grunt-modernizr task to crawl your code for Modernizr references you'll have to look at the config properties for the customizr task as this is part of grunt-modernizr 's node_modules:
modernizr: {
dist: {
dest: 'bower_components/modernizr/build/modernizr.custom.js',
uglify: false,
options: [
'setClasses',
'addTest'
],
files: {
src: ['js/app/**/*.js', 'js/app/*.js']
}
}
}
devFile: doesn't seem to matter where you point at
dest: instead of outputFile, note I'm just outputting to a build directory that's not part of the package
uglify: false if you have other minifying options like bundleconfig.json
options: to bypass the default options { "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" }
files: to enlist your crawlable director(y|ies), make sure you take care of the root files and/or subdirectories as well
Load the required tasks, in my case:
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-modernizr');
grunt.loadNpmTasks('grunt-contrib-copy');
Refer to the 'modernizr:dist' task => grunt.registerTask('default', ['clean', 'modernizr:dist', 'copy']);
Which results in an unminified 34kb file:
Running "clean:files" (clean) task
19 paths cleaned.
Running "modernizr:dist" (modernizr) task
Looking for Modernizr references
1 match in js/app/classes/yambo.options.js
bgpositionxy
1 match in js/app/modules/yambo.audio.js
audio
Ready to build using these settings:
setClasses, addTest
Building your customized Modernizr...OK
Success! Saved file to bower_components/modernizr/build/modernizr.custom.js
Process terminated with code 0.
Running "copy:main" (copy) task
Copied 11 files
Done, without errors.
This way there's no need to even go to the online build to add a feature test. Simply reference Modernizr throughout your js code:
window.Yambo = (function($, modernizr, ns){
ns.Audio = {
extension: (function () {
return modernizr && modernizr.audio.mp3
? 'mp3'
: modernizr.audio.ogg
? 'ogg'
: 'wav';
}())
};
return ns;
}(window.jQuery, window.Modernizr, window.Yambo || {}));
Make sure to use the correct property name for a feature detection, so customizr can pick it up and provide a test to your custom build.
This should be also possible for css but haven't been testing that for the moment.
It looks like you missed source files.
http://gruntjs.com/configuring-tasks#files-object-format
Try to include
"dist": {
"files": {
"src": ['!<%= appDir %>assets/js/bower/modernizr/**']
}
}

How to run multiple karma targets in Grunt?

We're using Grunt to build multiple, but similar, applications in one build.
It's a rather complex and large project with a folder for each application and a folder named share with lots of shared components.
multiple karma targets
Angular injects dependency by name (String) and our applications have files with the same names like HomeController, MenuController. This forces us to split up the karma targets per application so dependencies are loaded only from the shared and specific application being tested.
Fatal error
When using grunt to run the karma targets it only runs the first successful and fails to run the second. Fatal error: listen EADDRINUSE The error is somehow related to a port being used.
Karma config (simplified)
module.exports = function(config) {
'use strict';
config.set({
autoWatch: false,
basePath: '../',
frameworks: ['jasmine'],
exclude: [],
browsers: ['PhantomJS'],
plugins: [
'karma-html-reporter',
'karma-junit-reporter',
'karma-coverage',
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-brackets'
],
singleRun: false,
colors: true,
logLevel: config.LOG_DEBUG
});
};
Grunt-karma config
var dep = [
'bower_components/**/*.js',
'app/shared/**/*.js',
];
module.exports = {
options: {
configFile: 'test/karma.conf.js',
reporters: ['brackets', 'html', 'junit', 'coverage'],
browsers: ['PhantomJS'],
port: 9002,
singleRun: true
},
A: {
options: {
files: dep.concat([
'app/A/src/**/*.js'
]),
}
},
B: {
options: {
files: dep.concat([
'app/B/src/**/*.js'
]),
}
}
};
How can I run both karma targets (A and B) in the same the grunt task?
My guess is I have to either reset the karma server (phantomJs?) or run them as separate "sets" on the same target, but I can't find out how to do it.
Hope anyone out there might help! Thanks!
Update1
This issue on github seems to address the same problem, but has not yet made it to a release.
Maybe you can just move your port option into the targets and choose a different port for each one?
A: {
options: {
port: 9011,
files: dep.concat([
'app/A/src/**/*.js'
]),
}
},
B: {
options: {
port: 9012,
files: dep.concat([
'app/B/src/**/*.js'
]),
}
}
workaround that works
Remove the the karma tasks from the the distribution task.
Instead of trying to run multiple karma targets in one grunt task, you can execute multiple grunt commands separately from the command line (mainly on the continuous integration server. For development there is rarely a need to run all targets)
The command could be: (optional xxxxxx is any task you want to run after testing has completed)
grunt testA && grunt testB && grunt xxxxxx

Sending specs in grunt using grunt-protractor-runner

I am using grunt-protractor-runner plugin and in the protractor target I want to send the specs param containing the test to run.
In the grunt file my target looks as follows:
testIntegration:
{
options:
{
args: {
specs: ['test1.js'],
browser: 'firefox'
}
}
The protractor parent task option contains setting of the protractor config file.
When running this target I get this error:
$ grunt protractor:testIntegration
Running "protractor:testIntegration" (protractor) task
Starting selenium standalone server...
Selenium standalone server started at ...
Warning: pattern t did not match any files.
Warning: pattern e did not match any files.
Warning: pattern s did not match any files.
Warning: pattern t did not match any files.
Warning: pattern 1 did not match any files.
Warning: pattern j did not match any files.
Warning: pattern s did not match any files.
and then some more errors.
the same line works well in Protractor config file.
Tried a few other variation but no success.
What am I missing? Any ideas?
Try this configuration:
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
protractor: {
options: {
keepAlive: true,
singleRun: false,
configFile: "PROTRACTOR_CONFIG_FILE.js"
},
run_firefox: {
options: {
args: {
browser: "firefox"
}
}
}
});
// load grunt-protractor-runner
grunt.loadNpmTasks('grunt-protractor-runner');
// register tasks
grunt.registerTask('default', 'Run Protractor using Firefox',
['protractor:run_firefox']);
};
Funny, if you read every error message, it spells out "test1.js". Looks like it's not reading in the config file correctly, probably because you're not using grunt.file.readJSON('FILENAME.json')

Resources