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

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?

@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'