My .travis.yml
language: node_js
node_js:
- "0.12"
before_install:
- "export DISPLAY=:99.0"
- "sh -e /etc/init.d/xvfb start"
I have only added a few very simple tests so far (checking that class attributes exist).
I can see the tests are executed.
Then, the last few lines in the Travis output are this:
WARN [web-server]: 404: /css/style.min.css?1435068425.642
No output has been received in the last 10 minutes, this potentially indicates a stalled build or something wrong with the build itself.
The build has been terminated
If the tests are running, then the build and dependencies must have been installed already?
So why is the process not finishing once all tests are executed?
karma.config:
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: [
'jasmine',
'requirejs'
],
// list of files / patterns to load in the browser
files: [
{pattern: 'js/vendor/**/*.js', included: false},
{pattern: 'js/*.js', watched: true, included: false},
{pattern: 'test/**/*Spec.js', watched: true, included: false},
{pattern: 'css/**/*.css', included: false},
'test/test-main.js'
],
// list of files to exclude
exclude: [
'test/lib/**/*.js',
'js/vendor/**/test/*.js', //do not include the vendor tests
'js/_admin.js'
],
preprocessors: {
},
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Firefox'], //'Chrome', 'PhantomJS', 'PhantomJS_custom'
singleRun: false,
});//config.set
};//module.exports
test-main.js in folder test:
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(file);
}
//console.log('test files:', allTestFiles);
});
require.config({
baseUrl: '/base',
paths: {
'jquery': './js/vendor/jquery/jquery-2.1.4.min',
'jquery-ui': './js/vendor/jquery-ui-1.11.4.custom/jquery-ui.min',
'underscore': './js/vendor/underscore/underscore-min',
'backbone': './js/vendor/backbone/backbone-min',
'mustache': './js/vendor/mustache/mustache.min',
'domReady': './js/vendor/requirejs/plugins/domReady/domReady',
'text': './js/vendor/requirejs/plugins/text/text',
//------------------------------------
//custom requireJS application modules
'my': './js/my',
'my-CSS': './js/my-CSS'
},
shim: {
'underscore': {
exports: '_'
}
},
deps: allTestFiles,
callback: window.__karma__.start
});
The my-CSS module loads the css like this:
//custom requireJS module to hold the crowdUI class
define(["my"], function (my) { //prerequisites
'use strict';
//load the CSS definitions
document.head.appendChild(
my.createElement('link', {
attribute: {
id: 'my-CSS',
href: './css/style.min.css?' + crowdUI.TIMESTAMP,
rel: 'stylesheet',
type: 'text/css'
}
})
);
});
If the issue is just that your task requires more than 10 minutes during which it produces no output, the fix is simple: prepend your command with travis_wait.
For instance travis_wait myCommand instead of just myCommand.
Related
I get this warning every time I build for production. When I build for production I disable source maps in the rollup output config.
output: [{ dir: "...", format: "...", sourcemap: isProd ? false : true }]
I use the same tsconfig for dev and production, tsconfig.json:
{
"compilerOptions": {
// Output
"target": "ESNext",
"module": "ESNEXT",
"sourceMap": true,
"jsx": "react",
"noEmit": true,
// Compile time code checking
"strict": true,
// Libraries
"lib": ["dom", "esnext"],
// Imports
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"exclude": ["dist", "app"]
}
I understand that this is the reason for the warning from looking at the rollup plugin source code:
/**
* Validate that the `compilerOptions.sourceMap` option matches `outputOptions.sourcemap`.
* #param context Rollup plugin context used to emit warnings.
* #param compilerOptions Typescript compiler options.
* #param outputOptions Rollup output options.
* #param autoSetSourceMap True if the `compilerOptions.sourceMap` property was set to `true`
* by the plugin, not the user.
*/
function validateSourceMap(context, compilerOptions, outputOptions, autoSetSourceMap) {
if (compilerOptions.sourceMap && !outputOptions.sourcemap && !autoSetSourceMap) {
context.warn(`#rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.`);
}
else if (!compilerOptions.sourceMap && outputOptions.sourcemap) {
context.warn(`#rollup/plugin-typescript: Typescript 'sourceMap' compiler option must be set to generate source maps.`);
}
}
But I would prefer to not add the complexity of one tsconfig for dev and another for production.
What would be a good way to get rid of this warning?
In my case, I was using the official Svelte starter template, with TypeScript integration.
In my case, I didn't need to change my tsconfig from the default one extended by the template (which had "sourceMap": true,); I just needed to change the output.sourcemap setting in my rollup.config.js to make it consistent with the options I'd passed into the typescript() plugin:
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.ts',
output: {
// sourcemap: true, // <-- remove
sourcemap: !production,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
preprocess: sveltePreprocess({ sourceMap: !production }),
compilerOptions: {
dev: !production
}
}),
css({ output: 'bundle.css' }),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({
sourceMap: !production,
inlineSources: !production
}),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
Use a base tsconfig and add only the options that are different to dev and prod versions, as reference see:
https://github.com/microsoft/TypeScript/issues/9876
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends
I am writing a sample ASP .NET MVC application, which has karma and requirejs to test the scripts. I see below error Uncaught (in promise) Error: No tests were run.
I see below error in command prompt
Chrome 77.0.3865 (Windows 10.0.0): Executed 0 of 0 ERROR (0.012 secs / 0 secs)
Package.json
{
"name": "karmawebapp",
"version": "1.0.0",
"description": "test application for karma tests",
"main": "index.js",
"scripts": {
"test": "karma start"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"karma": "^4.3.0",
"karma-chrome-launcher": "^3.1.0",
"karma-qunit": "^4.0.0",
"karma-requirejs": "^1.1.0",
"protractor": "^5.4.2",
"qunit": "^2.9.3",
"requirejs": "^2.3.6"
}
}
My karma.conf.js
// Karma configuration
// Generated on Tue Oct 15 2019 13:51:47 GMT-0500 (Central Daylight Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['requirejs', 'qunit'],
// list of files / patterns to load in the browser
files: [
'test-main.js',
{ pattern: './Scripts/tests/*.specs.js', included: false }
],
// list of files / patterns to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
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,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
My test-main.js
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule)
};
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
// dynamically load all test files
deps: allTestFiles,
path: {
qunit: 'qunit',
jquery: 'jquery.3.3.1'
},
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
my test.specs.js
define(['qunit'], function (qunit) {
qunit.test("Second test", function (assert) {
assert.ok(true, "Passed!");
});
});
Use the debug set up to open devtools on the browser:
http://karma-runner.github.io/4.0/intro/troubleshooting.html
I was able to run these test cases. Looks whenever their is error in your specs file No tests were run message will come. You need make sure you specs file syntax is correct
I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
Here is what my Webpack config looks like:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
Here is the middleware step that makes use of Webpack:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');
var express = require('express');
var app = express();
var port = 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, function(err) {
console.log('Server started on http://localhost:%s', port);
});
All my index.js file is doing is importing react, but it seems like the 'babel-loader' is not working.
I am using 'babel-loader' 6.0.0.
You need to install the es2015 preset:
npm install babel-preset-es2015
and then configure babel-loader:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
Make sure you have the es2015 babel preset installed.
An example package.json devDependencies is:
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"webpack": "^1.9.6",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
Now configure babel-loader in your webpack config:
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
add a .babelrc file to the root of your project where the node modules are:
{
"presets": ["es2015", "stage-0", "react"]
}
More info:
babeljs.io - using babel with webpack
babeljs.io - docs on .babelrc
react-webpack-cookbook - configure react with webpack
a react-webpack-example repo
If you are using Webpack > 3 then you only need to install babel-preset-env, since this preset accounts for es2015, es2016 and es2017.
var path = require('path');
let webpack = require("webpack");
module.exports = {
entry: {
app: './app/App.js',
vendor: ["react","react-dom"]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../public')
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory=true',
}
}]
}
};
This picks up its configuration from my .babelrc file:
{
"presets": [
[
"env",
{
"targets": {
"browsers":["last 2 versions"],
"node":"current"
}
}
],["react"]
]
}
BABEL TEAM UPDATE:
We're super 😸 excited that you're trying to use ES2015 syntax, but instead of continuing yearly presets, the team recommends using babel-preset-env. By default, it has the same behavior as previous presets to compile ES2015+ to ES5
If you are using Babel version 7 you will need to run npm install #babel/preset-env and have "presets": ["#babel/preset-env"] in your .babelrc configuration.
This will compile all latest features to es5 transpiled code:
Prerequisites:
Webpack 4+
Babel 7+
Step-1:: npm install --save-dev #babel/preset-env
Step-2: In order to compile JSX code to es5 babel provides #babel/preset-react package to convert reactjsx extension file to native browser understandable code.
Step-3: npm install --save-dev #babel/preset-react
Step-4: create .babelrc file inside root path path of your project where webpack.config.js exists.
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
Step-5: webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html"
})
]
}
In my case, I had such error since import path was wrong:
Wrong:
import Select from "react-select/src/Select"; // it was auto-generated by IDE ;)
Correct:
import Select from "react-select";
Due to updates and changes overtime, version compatibility start causing issues with configuration.
Your webpack.config.js should be like this you can also configure how ever you dim fit.
var path = require('path');
var webpack = require("webpack");
module.exports = {
entry: './src/js/app.js',
devtool: 'source-map',
mode: 'development',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
},{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
output: {
path: path.resolve(__dirname, './src/vendor'),
filename: 'bundle.min.js'
}
};
Another Thing to notice it's the change of args, you should read babel documentation https://babeljs.io/docs/en/presets
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
NB: you have to make sure you have the above #babel/preset-env & #babel/preset-react installed in your package.json dependencies
You probably forgot to add .js extension to your file.
Component -> Component.js
This makes me feel stupid, but I want to share for anyone that got frustrated like me: I used webpack.dev.js but didn't specify that as the config file! When running Webpack run with:
webpack --config webpack.dev.js
And it suddenly worked ;)
Just adding on another reason such error showed up in Angular.. was because I checked for html file in list of styles:
#Component({
selector: ...,
templateUrls: 'xyz.html',
stylesUrls: ['xyz.html'] // problem
})
Addressing wrong file type raises this error
As question doesn't specify if it was for angular, react, or react-native. I am posting this for react-native and it may be implied on others too. The reason was that it wasn't able to understand the syntax specified by loader. e.g. tsx, jsx. One solution I found in this article after lots of exploration. When we use external library that was using jsx and you configured your project with tsx, it won't understand jsx and will give you to add appropriate loader. So, you can fix that by following code in your app.json file.
"web": {
"build": {
"babel": {
"include": [
"name-of-my-shared-package-here"
]
}
}
}
By replacing name-of-my-shared-package-here with your package name that is causing the issue will solve this issue. You can check the package name in error that is causing this issue.
Outdated babel packages on Jan 3, 2023
Please install these list of packages for configuration with babel.
$ npm add -D #babel/core babel-loader #babel/preset-env #babel/preset-react
and add below code .babelrc file
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I used #khizer webpack configuration in my application
Credit goes to This answer. As I have have been gone through the best answer of this solution and it tooks my 2-3 hours. I hope other don't waste same amount of time.
When using Typescript:
In my case I used the newer syntax of webpack v3.11 from their documentation page
I just copied the css and style loaders configuration form their website.
The commented out code (newer API) causes this error, see below.
module: {
loaders: [{
test: /\.ts$/,
loaders: ['ts-loader']
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
]
// ,
// rules: [{
// test: /\.css$/,
// use: [
// 'style-loader',
// 'css-loader'
// ]
// }]
}
The right way is to put this:
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
in the array of the loaders property.
This one throw me for a spin.
Angular 7, Webpack
I found this article so I want to give credit to the Article
https://www.edc4it.com/blog/web/helloworld-angular2.html
What the solution is:
//on your component file. use template as webpack will treat it as text
template: require('./process.component.html')
for karma to interpret it
npm install add html-loader --save-dev
{
test: /.html$/,
use: "html-loader"
},
Hope this helps somebody
Just add this code webpackmix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]).vue();
I have my bower.json like:
..
"install": {
"base": "static/my-project/libs",
"path": {
..
"eot": "{name}/fonts",
"otf": "{name}/fonts",
"svg": "{name}/fonts",
"woff": "{name/fonts",
..
}
},
..
to install font related resources to static/my-project/libs/bower-package-name/fonts/.
But I found that slick.js expects fonts to be placed in bower-package-name/css/fonts, not bower-package-name/fonts/.
Since I have other dependency that expects fonts to be located in bower-package-name/fonts/, I want to install these font related resources to multiple paths, both in bower-package-name/fonts/ and bower-package-name/css/fonts.
Is there any way to install bower dependencies to multiple paths like:
..
"install": {
"base": "static/my-project/libs",
"path": {
..
"eot": ["{name}/fonts", "{name}/css/fonts"],
"otf": ["{name}/fonts", "{name}/css/fonts"],
"svg": ["{name}/fonts", "{name}/css/fonts"],
"woff": ["{name}/fonts", "{name}/css/fonts"],
..
}
},
..
for example?
If you are using grunt, you can use grunt-contrib-copy to copy your resources to different location.
Sample grunt copy task would look like (from the above source):
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['path/*'], dest: 'dest/', filter: 'isFile'},
// includes files within path and its sub-directories
{expand: true, src: ['path/**'], dest: 'dest/'},
// makes all src relative to cwd
{expand: true, cwd: 'path/', src: ['**'], dest: 'dest/'},
// flattens results to a single level
{expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'},
],
},
},
I have Browserify, 6to5ify and Karma to play nice, successfully running my specs. When I add code coverage however, things go south. I've tried several approaches:
Add browserify-istanbul transform to my karma.conf.js. However, this results in it trying to run instrumentation on my spec-files as well it would appear.
Run coverage preprocessor on my source files. But because istanbul (even douglasduteil/karma-coverage#next) doesn't read my 6to5ify browserify transform, this crashes immediately on the first file it tries to parse (because of the import statement), or when I use karma-coverage#next, it doesn't respect the browser mapping in my package.json (mobile project, mapped Backbone to Exoskeleton).
Right now my karma.conf.js looks like this:
module.exports = function(karma){
karma.set({
frameworks: ["browserify", "mocha", "chai-sinon"],
browserify: {
debug: true,
extensions: [".js", ".hbs"],
transform: ["6to5ify", "hbsfy"]
},
reporters: ["dots", "osx", "junit", "coverage"],
coverageReporter: {
type: "text"
},
junitReporter: {
outputFile: "spec/reports/test-results.xml"
},
preprocessors: {
"src/javascript/**/*": ["coverage"],
"spec/**/*": ["browserify"]
},
browsers: ["PhantomJS"],
files: ["spec/unit/**/*Spec.js"],
logLevel: "LOG_DEBUG",
autoWatch: true
});
};
I'm kind of lost how to get this all working together. I tried following these instructions, but that didn't work because it didn't follow my browser node in package.json. Any help would be greatly appreciated.
So, apparently I need browserify-istanbul, and I need the browserify configure hook, like so:
var to5ify = require('6to5ify');
var hbsfy = require('hbsfy');
var cover = require('browserify-istanbul');
var coverOptions = {
ignore: ['**/*Spec.js', '**/lib/*.js', '**/fixtures/*.hbs'],
defaultIgnore: true
}
module.exports = function(karma){
karma.set({
frameworks: ["browserify", "mocha", "chai-sinon"],
browserify: {
debug: false,
extensions: [".js", ".hbs"],
configure: function(bundle){
bundle.on('prebundle', function(){
bundle
.transform(to5ify)
.transform(hbsfy)
.transform(cover(coverOptions));
});
}
},
reporters: ["dots", "osx", "junit", "coverage"],
coverageReporter: {
type: "text"
},
junitReporter: {
outputFile: "spec/reports/test-results.xml"
},
preprocessors: {
"spec/**/*": ["browserify"]
},
browsers: ["PhantomJS"],
files: ["spec/unit/**/*Spec.js"],
logLevel: "LOG_DEBUG",
autoWatch: true
});
};