React components not works in RequireJS+Jasmine unit tests

Question

I'm working on creation my own bootstrap project. At the moment I finished a lot of things, but now I meet the problem with unit tests for ReactJS components.

When I run application in browser - all works fine. I use RequireJS for lazy loading of needed modules. React compmonents wrapped into RequireJS modules and in browser all works as expected.

But when I trying to make unit tests for react components, RequireJs not load React. And React is undefined...

Here is the Gruntfile.js, where I create karma task.

Here is karma.config.js file with karma configurations.

Here is the test-main.js which is run the tests.

My test file looks like this:

define(['helper/utils', 'underscore', 'components/List'], function(utils, _, List){
    describe("First test for example", function() {
        it("TRUE should be TRUE :)", function() {
            expect(true).toBe(true);
        });

        it("Test requirejs helper loading", function(){
            expect(utils.testJasmine()).toBe("Jasmine");
        });

        it('Underscore is works', function() {
            // just checking that _ works
            expect(_.size([1,2,3])).toEqual(3);
        });

        it('List component is loaded', function(){
            expect(List.test()).toBe('List Component');
        });

    });
});

List - it's my ReactJS component. And when I trying to run my tests, I'm got the error as result:

grunt test
Running "karma:unit" (karma) task
15 12 2015 15:17:40.813:INFO [karma]: Karma v0.13.15 server started at http://localhost:9876/
15 12 2015 15:17:40.833:INFO [launcher]: Starting browser PhantomJS
15 12 2015 15:17:42.430:INFO [PhantomJS 1.9.8 (Windows 7 0.0.0)]: Connected on socket uQidvbVxLImPJ1kdAAAA with id 99794753
PhantomJS 1.9.8 (Windows 7 0.0.0) LOG: 'spec/FirstSpec'

PhantomJS 1.9.8 (Windows 7 0.0.0) ERROR: TypeError{message: ''undefined' is not a function (evaluating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]
*$/)')', line: 3195, sourceId: 86376736, sourceURL: 'http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a', stack:
'TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/)')
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:3195
    at s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4)
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:8481
    at s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4)
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:6100
    at s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4)
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:18
    at s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4)
    at e (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4)
    at http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:18793
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1690
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:865
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1177
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:783
    at callGetModule (http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1204)
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1583
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1711', stackArray: [Object{sourceURL: ..., line: ...}
, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., li
ne: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...
}, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., l
ine: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{func
tion: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}]}

PhantomJS 1.9.8 (Windows 7 0.0.0) ERROR: TypeError{message: ''undefined' is not an object (evaluating 'React.createClass')', line: 4, sourceId: 86378776, sourceUR
L: 'http://localhost:9876/base/scripts/components/List.js?11abba705dd0e6b2d4637e4057531f428d9dcf1c', stack: 'TypeError: 'undefined' is not an object (evaluating '
React.createClass')
    at http://localhost:9876/base/scripts/components/List.js?11abba705dd0e6b2d4637e4057531f428d9dcf1c:4
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1690
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:865
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1140
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:131
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1190
    at each (http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:56)
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1191
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:940
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1177
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:783
    at callGetModule (http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1204)
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1583
    at http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1711', stackArray: [Object{sourceURL: ..., line: ...}
, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..
., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line
: ...}, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}]
}

PhantomJS 1.9.8 (Windows 7 0.0.0) First test for example List component is loaded FAILED
        TypeError: 'undefined' is not an object (evaluating 'List.test')
            at c:/Users/dmytro.medvid/sites/evolution/spec/FirstSpec.js:30
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1690
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:865
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1140
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:131
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1190
            at each (c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:56)
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1191
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:940
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1140
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:131
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1190
            at each (c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:56)
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1191
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:940
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1140
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:131
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1190
            at each (c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:56)
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1191
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:940
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1177
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:783
            at callGetModule (c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1204)
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1583
            at c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1711
PhantomJS 1.9.8 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0.007 secs / 0.003 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

Tomasz Jakub Rup · Accepted Answer · 2015-12-15 15:55:50Z

2

ReactJS have problem with PhantomJS https://github.com/facebook/react/pull/347

This is a fix:

Load https://github.com/facebook/react/blob/3dc10749080a460e48bee46d769763ec7191ac76/src/test/phantomjs-shims.js file.

Add to karma.config.js to files

'scripts/phantomjs-shims.js',

answered Dec 15, 2015 at 15:55

Tomasz Jakub Rup

10.7k7 gold badges52 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React components not works in RequireJS+Jasmine unit tests

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related