I'm trying to write unit tests using Karma + Jasmine + RequireJS. When in my spec I use request.js I get below error:
Chrome 36.0.1985 (Linux) ERROR
Uncaught Error: Module name "lib/optional" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at /home/leo/workspace/Test-js/node_modules/requirejs/require.js:141
I have the following file structure:
-- app
|-- node_modules
| `-- request
| `-- node_modules
| `-- requets.js
|-- test
| `-- testSpec.js
|-- karma.conf.js
|-- test-main.js
Here's my karma configuration,
...
basePath: '',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'node_modules/request/**/**.js', included: false},
{pattern: 'test/**/*Spec.js', included: false},
'test-main.js',
],
...
Also, here's my test-main.js,
...
baseUrl: '/base',
paths: {
'request': 'node_modules/request/request',
},
...
And my Jasmine spec,
define(['request'], function(request) {
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
});
Related
I am trying to bundle my nodejs express app with Webpack, I keep on getting the same error, will greatly appreciate help
node version 8.9.1
webpack version 4.41.2
Operating System Windows 10
My project structure
.
├── node_modules
├── package.json
├── README.md
├── src
│ ├── components
│ ├── index.js
|__ webpack-config.js
|
My Webpack config is following
var webpack = require('webpack');
import path from "path";
import nodeExternals from "webpack-node-externals";
module.exports = {
entry: {app:"./src/index.js"},
target: "node",
output: {
path: path.join(__dirname, 'webpack-build'),
filename: "bundle.js"
},
module:{
rules:[{
test: /\.(js)$/,
exclude: /(node_modules)/,
// flags to apply these rules, even if they are overridden (advanced option)
loader: "babel-loader",
// the loader which should be applied, it'll be resolved relative to the context
options: {
presets: ["es2015"]
},
}]
},
externals: [nodeExternals()]
};
Things I Have Tried
add webpack-node-externals to Externals property
Tried adding
resolve: {
root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
extensions: ['', '.js']
};
ERROR I GET
I see this answer but AFAICT it's not working for me. Maybe I'm doing something stupid.
I'm using almond and grunt-contrib-requirejs. I've tried a bunch of stuff
Here's my layout
.
├── Gruntfile.js
├── 3rdparty
│ ├── require.js
├── src
│ ├── lib.js
│ └── main.js
└── node_modules
└── almond
└── almond.js
And here's my grunt-contrib-requirejs config
requirejs: {
full: {
options: {
baseUrl: "./",
name: "node_modules/almond/almond.js",
include: [ "src/main.js" ],
out: "dist/app.js",
optimize: "none",
},
},
},
main.js looks like this
requirejs(['./lib',], function(lib) {
lib.hello();
});
lib.js looks like this
define([], function() {
return {
hello: function() {
console.log("hello from lib");
},
};
});
If run a page that uses require.js as in
<script src="3rdparty/require.js" data-main="src/main.js"></script>
It runs great. You can see it live it here. Check the console and you'll see it prints hello from lib
So I run grunt. Then I run a page that uses dist/app.js and I get the error
Uncaught Error: undefined missing lib
Here's a live page.
Checking the generated dist/app.js I see lib has been turned into this
define('src/lib',[], function() {
...
});
And main is including it like this
requirejs(['./lib'], function(lib) {
...
});
In other words, the id that r.js generated src/lib doesn't match the id that main is referencing ./lib.
This seems like a very straight forward example for r.js. Like practically "hello world".
What am I doing wrong?
One thing I've tried is changing the baseUrl to ./src
requirejs: {
full: {
options: {
baseUrl: "./src",
name: "node_modules/almond/almond.js",
include: [ "src/main.js" ],
out: "dist/app.js",
optimize: "none",
},
},
},
But now I get
{ [Error: Error: ENOENT: no such file or directory, open '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js'
at Error (native)
]
originalError:
{ [Error: ENOENT: no such file or directory, open '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js']
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js',
fileName: '/Users/gregg/temp/grunt-contrib-requirejs-example/src/node_modules/almond/almond.js' } }
So I try fixing the almond path
requirejs: {
full: {
options: {
baseUrl: "./src",
name: "../node_modules/almond/almond.js",
include: "main",
out: "dist/app.js",
optimize: "none",
},
},
},
But that fails as well
{ [Error: Error: ERROR: module path does not exist: ../node_modules/almond/almond.js for module named: ../node_modules/almond/almond.js. Path is relative to: /Users/gregg/temp/grunt-contrib-requirejs-example
at /Users/gregg/temp/grunt-contrib-requirejs-example/node_modules/requirejs/bin/r.js:30214:35
]
originalError: [Error: ERROR: module path does not exist: ../node_modules/almond/almond.js for module named: ../node_modules/almond/almond.js. Path is relative to: /Users/gregg/temp/grunt-contrib-requirejs-example] }
What am I not getting?
The entire thing is checked into github here if you'd like to work with it.
So here's the answer.
r.js prefers module names not paths
requirejs: {
full: {
options: {
baseUrl: "./src",
paths: {
almond: "../node_modules/almond/almond",
}
name: "almond",
include: [ "main.js" ],
out: "dist/app.js",
optimize: "none",
},
},
},
I am attempting to set up Karma/Mocha/Chai into my Backbone project, which uses requirejs and not having much luck.
First, here's my setup:
- app/
- js/
- bower_components/
- node_modules/
- test/
- test-main.js
- karma.conf.js
// relevant bits of karma.conf.js
frameworks: ['mocha', 'requirejs', 'chai'],
files: [
'test/test-main.js',
{pattern: 'bower_components/requirejs-text/text.js', included: false},
{pattern: 'bower_components/jquery/dist/jquery.js', included: false},
{pattern: 'bower_components/underscore/underscore.js', included: false},
{pattern: 'bower_components/backbone/backbone.js', included: false},
{pattern: 'app/js/**/*.js', included: false},
{pattern: 'test/**/*Spec.js', included: falase}
],
exclude: [ 'app/js/requireConfig.js', 'app/js/main.js' ],
preprocessors: { '**/*.html': [] },
// test-main.js
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$\i;
var pathToModules = function(path) {
return path.replace(/^\/base\//, '').replace(/\.js$/, '');
}
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.text(file)) {
allTestFiles.push(pathToModule(file));
}
});
require.config({
baseUrl: '/base/app/js',
paths: {
text: '../../bower_components/requirejs-text/text',
jquery: '../../bower_components/jquery/dist/jquery',
underscore: '../../bower_components/underscore/underscore',
backbone: '../../bower_components/backbone/backbone',
test: '../../test',
},
deps: allTestFiles,
callback: window.__karma__.start;
});
When I run karma, I get:
Error: Mismatched anonymous define() module: function(module) {
--the entire contents of text.js --
I tried changing the order of "frameworks" to frameworks: ['mocha', 'chai', requirejs'], which made the mismatch error go away, but then got:
TypeError: 'undefined' is not an object (evaluating 'window.chai.should')
This is a known issue and the recommendation is to keep requirejs before chai.
Does anyone have experience getting requirejs-text to work? Thanks.
Welp, sorry to waste a question on SO. I started from scratch and my above configuration (aside from needing "{pattern: 'app/js/**/*.html', included: false}") worked fine.
For completeness, here is the updated configuration:
- app/
- js/
- bower_components/
- node_modules/
- test/
- test-main.js
- karma.conf.js
// ---- relevant bits of karma.conf.js ----
// "requirejs" must come before "chai" or Chai will not load properly.
// Sidenote: Karma loads the listed frameworks backwards.
frameworks: ['mocha', 'requirejs', 'chai'],
// Contrary to what a few stackoverflow and github issue responses
// suggested, the order of files do not appear to matter at all.
files: [
'test/test-main.js',
// app files
{pattern: 'app/js/**/*.html', included: false},
{pattern: 'app/js/**/*.js', included: false},
// tests
{pattern: 'test/**/*Spec.js', included: false},
// libraries
{pattern: 'bower_components/jquery/dist/jquery.js', included:false, watching: false},
{pattern: 'bower_components/underscore/underscore.js', included:false, watching: false},
{pattern: 'bower_components/backbone/backbone.js', included:false, watching: false},
{pattern: 'bower_components/requirejs-text/text.js', included:false, watching: false},
],
exclude: [ 'app/js/requireConfig.js', 'app/js/main.js' ],
preprocessors: {},
// ---- test-main.js ----
var allTestFiles = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
if (/Spec\.js$/.test(file)) {
allTestFiles.push(file);
}
}
}
require.config({
baseUrl: '/base/app/js',
paths: {
jquery: '../../bower_components/jquery/dist/jquery',
underscore: '../../bower_components/underscore/underscore',
backbone: '../../bower_components/backbone/backbone',
text: '../../bower_components/requirejs-text/text',
},
deps: allTestFiles,
callback: window.__karma__.start;
});
i'm trying to use almond.js in grunt to combine my files into on .js and uglify it.
My configuration in grunt is like this:
requirejs: {
compile: {
options: {
baseURL: "www/js/lib",
mainConfigFile: 'www/js/main.js',
name: '../../../node_modules/almond/almond',
include: '../main',
out:'../target/app.min.js',
findNestedDependencies: true,
optimize: 'uglify',
}
}
},
my main.js is this:
require.config({
baseUrl: "js/lib",
paths: {
app: '../app',
tpl: '../tpl'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'backbone-indexeddb': {
deps: ['backbone', 'IndexedDBShim']
},
'IndexedDBShim': {
deps: ['backbone']
}
}
});
If i try to run grunt requirejs i get an error:
Error: Error: ERROR: module path does not exist: project/www/js/js/lib/../../../node_modules/almond/almond.js for module named: ../../../node_modules/almond/almond. Path is relative to: project
at /project/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25964:35
which i do not understand, where does the second /js/ in the path come from? It does not exist in my file structure, i have my project folder set up like this
project
gruntfile
node_modules
almond
almond.js
www
index.html
js
app
lib
main.js
Oh, i'm configuring the baseurl twice, shouldn't do that. If i remove the baseurl parameter in the gruntfile it works fine.
I'm using karma 0.10.9 with requirejs, coffeescript, jasmine and jasmine-sprockets (because I'm working on a RoR project, and we have a few files that only contain sprockets directives).
When I start karma, I get that "Executed 0 of 0 ERROR" message.
Looks like on the runner page (localhost:9876) the lib and src files don't get loaded but the specs do. No errors in the console. When I copy the url of a lib or src file directly into the address bar, the file gets loaded.
On the debug page all files (libs, sources and tests) get loaded.
I'm clueless...
Here's my karma.conf.js:
module.exports = function(config) {
config.set({
basePath: '../../..',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: 'vendor/assets/javascripts/**/*.js', included: false},
{pattern: 'app/assets/javascripts/v5/**/*.coffee', included: false},
'spec/javascripts/helpers/jasmine-jquery.js',
'spec/javascripts/helpers/maps-helper.js',
{pattern: 'spec/javascripts/fixtures/*.html', watched: true, included: false, served: true},
{pattern: 'spec/javascripts/v5/**/*_spec.coffee', included: false},
'spec/javascripts/v5/test-main.coffee'
],
hostname: [
'localhost'
],
exclude: [
],
preprocessors: {
'**/*.coffee': ['coffee']
},
coffeePreprocessor: {
// transforming the filenames
transformPath: function(path) {
return path.replace(/(.js.coffee|.coffee)/, '.js');
}
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [],
captureTimeout: 20000,
singleRun: false,
reportSlowerThan: 500,
sprocketsPath: 'vendor/assets/javascripts',
sprocketsBundles: [
'bootstrap.js',
'plugins_jquery.js'
],
plugins: [
'karma-jasmine',
'karma-requirejs',
'karma-coffee-preprocessor',
'karma-sprockets'
]
});
};
And the test-main.coffee:
tests = []
for file of window.__karma__.files
tests.push file if /_spec\.js$/.test(file) if window.__karma__.files.hasOwnProperty(file)
# https://github.com/karma-runner/karma-requirejs/issues/6#issuecomment-23037725
for file of window.__karma__.files
window.__karma__.files[file.replace(/^\//, "")] = window.__karma__.files[file]
requirejs.config
baseUrl: 'base/app/assets/javascripts/'
paths:
jquery: '../../../vendor/assets/javascripts/jquery'
underscore: '../../../vendor/assets/javascripts/lodash'
backbone: '../../../vendor/assets/javascripts/backbone'
// etc.pp.
shim:
backbone:
deps: ['jquery', 'underscore', 'json2']
exports: 'Backbone'
json2:
exports: 'JSON'
deps: tests
callback: window.__karma__.start
Any help appreciated.
Thanks!
Your spec should require the file it tests.
In your karma.conf.js the files section should have your src files. once the files are served by karma. then you can require them in your spec.