[JS: Testing] require('react-native') and jest test fails

[ghost]

I have the following simple Module

/**
 * @providesModule DropBox
 * @flow
 */
'use strict';

var React = require('react-native');
var {
   NativeModules,
    } = React;

var _ = require('underscore')._;

class DropBox {

    constructor() {
        this.nativeModule = NativeModule.DropBox;
    }

    loadFiles() {
        return new Promise((resolve, reject) => {
            this.nativeModule.load((error, names, contents) => {
                if (error) {
                    reject(error);
                } else {
                    var parsedContent = contents.map((c) => {
                        return JSON.parse(c);
                    });
                    resolve(_.zip(names, parsedContent));
                }
            });
        })
    }
}

module.exports = DropBox;

and the following test:

jest.dontMock('../js/model/DropBox');

describe('loadFiles', function() {
 it('adds 1 + 2 to equal 3', function() {
   var DropBox = require('../js/model/DropBox');
   expect(1 + 21).toBe(3);
 });

});

I know that the test is nonsense, but I just want to make sure that my setup works. Running npm test gives:

• TypeError: /Users/roger/Documents/AwesomeProject/js/model/DropBox.js: /Users/roger/Documents/AwesomeProject/node_modules/react-native/Libraries/react-native/react-native.js: /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/browser/ui/React.js: /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/modern/class/ReactComponent.js: /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/core/ReactUpdateQueue.js: /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/core/ReactUpdates.js: undefined is not a function
  at /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/core/ReactUpdates.js:26:39
  at /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/core/ReactUpdateQueue.js:18:20
  at /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/modern/class/ReactComponent.js:14:24
  at /Users/roger/Documents/AwesomeProject/node_modules/react-tools/src/browser/ui/React.js:18:22
  at /Users/roger/Documents/AwesomeProject/node_modules/react-native/Libraries/react-native/react-native.js:20:47

[StevenLangbroek]

Related StackOverflow question with some more research: How to use Jest with React Native

[amasad]

The main reason for this issue is that we currently ship React in source form (react-tools) inside react-native. That means that it's written in ES6 and it depends on globals like __DEV__, which your jest setup should support that. We have plans to start shipping react from npm, (I think with React v0.14). @zpao can you confirm this?

In the mean time here is what you can do: adapt the jestSupport directory and the jest config in the package.json to be used with your project.

[naoufal]

I'm actually still getting errors after using the jestSupport/package.json setup. But it seems to be because I'm requiring a React component in my jest test.

I haven't seen any of the tests in this repo do that yet, so I'm assuming it isn't supported yet.

@amasad can you confirm?

[ghost]

@naoufal

You have to mock react-native. The following example works:

jest.setMock('react-native', {
    NativeModules: {}
});
jest.dontMock('../js/model/DropBox');
jest.dontMock('mori');

var mori = require('mori')

describe('loadFiles', function() {

    pit('Spec 1', function() {

    var DropBox = require('../js/model/DropBox');
    var dropBox = new DropBox({
        load: function(callback) {
            callback(false, 
                ["file1"], 
                ['{"value":1}'])}
        });

   return dropBox.loadFiles().then(
        function(stuff) {
            var result = mori.toJs(stuff);
            expect(result.length).toBe(1);
        });
    });
});

[brentvatne]

I think we need a section in the docs about how to test your React Native components

[naoufal]

@brentvatne I'd be glad to help if you guys think the approach here is satisfactory. naoufal/react-native-progress-hud#1

[brentvatne]

@naoufal - that would be great! can you write up a draft for that and submit a PR? I'll review and augment as necessary

[naoufal]

Sure — I'll try and submit a PR tomorrow.

[naoufal]

@brentvatne PR submitted #1477. Can you review/leave feedback?

[Pajn]

I'm getting problems with react-natives special requires

Error: /home/rasmus/Development/test/app/react/app/components/__tests__/button-test.tsx: /home/rasmus/Development/test/app/react/app/components/button.ios.tsx: /home/rasmus/Development/test/app/react/node_modules/react-native/Libraries/react-native/react-native.js: Cannot find module 'React' from '/home/rasmus/Development/test/app/react/node_modules/react-native/Libraries/react-native'

[vitalets]

Does anybody managed to get auto mocked react-native ?
Could you provide a working example or project?
I'm still getting error when try to import React from 'react-native in jest..

[brentvatne]

cc @cpojer

[taypo]

Any update on this issue? I'm looking for a straight forward way of testing components. Cheers..

[StevenLangbroek]

@taypo see this article: https://blog.formidable.com/unit-testing-react-native-with-mocha-and-enzyme-51518f13ba73

[cpojer]

I'm currently polishing up the release for 0.9.0 which should improve the babel support in Jest and will fix performance. The next step will be to improve mocking of react-native by a lot.

[cpojer]

Thank you for your patience. We launched Jest 14.0 with experimental react-native support:

• Blog Post
• React-Native Tutorial

Please feel free to create new issues after trying out the new integration if any issues remain.