How to set up protractor to import AMD modules with requirejs
I am trying to import an AMD module (ES6 module passed to ES5) in a protractor test. I am using Page Object template . The page object is the module I am trying to import.
Here is the ES6 code:
import {HelloPage} from 'HelloPage';
describe('The demo app', function () {
beforeEach(function () {
browser.get('http://localhost:3000/index.html');
});
it('should say hello',function(){
var helloPage = new HelloPage();
helloPage.setFirstName('Martin');
helloPage.submit();
// then, expect statement.
})
});
The generated ES5 code looks like this:
define(['HelloPage'], function($__0) {
"use strict";
if (!$__0 || !$__0.__esModule)
$__0 = {default: $__0};
var HelloPage = $__0.HelloPage;
describe('The demo app', function() {
beforeEach(function() {
browser.get('http://localhost:3000/index.html');
});
it('should say hello', function() {
var helloPage = new HelloPage();
helloPage.setFirstName('Martin');
helloPage.submit();
});
});
return {};
});
The problem is I am using define () from requirejs. But I never stated that I am using requirejs. So I am getting the following error:
Failures:
1) Exception loading: build/test/e2e/Hello.spec.js Error
Message:
ReferenceError: define is not defined
The protractor file looks like this:
exports.config = {
capabilities: {
'browserName': 'chrome'
},
specs: [ 'build/test/e2e/**/*.js'],
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
}
};
Where should I declare in this config file that I am using requirejs to execute tests?
source to share
The solution is to use amdefine as described in requirejs.org/docs/node.html#3 The disadvantage of this solution is that you need to add each module on the following line:
if (typeof define !== 'function') { var define = require('amdefine')(module) }
In my specific case, since I am using traceur to transfer ES6 files, I decided to use commonjs module instead of AMD for e2e tests. The reason it differs from the unit tests done by Karma (where I can easily use AMD) is because the weighting tags are executed by Node.js, not the browser. So, I changed the parameters of the trace modules for e2e tests just for this:
{
"modules": "commonjs",
"script": false,
"types": true,
"annotations": true,
"memberVariables":true,
"outputLanguage": "es5"
}
source to share
I would recommend not to translate first and then import, but just use ES6 in protractor. Place the following at the top of your protractor.conf.js file. Now you can just use the import instructions.
For Babel 6, put the protractor.conf.js file on top (or in onPrepare):
require("babel-core/register")({
presets: [
"es2015"
]
});
source to share
You can also use amdefine as Martin said, but without adding each file with
if (typeof define !== 'function') { var define = require('amdefine')(module) }
Just include "amdefine": ">=0.1.0"
in your devDependencies and add require('amdefine/intercept');
to the onPrepare function in your protractor config. It will automatically add the above snippet to every .js file loaded by Node.
source to share