New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rogergl opened this Issue Apr 6, 2015 · 16 comments

Comments

Projects
None yet
10 participants
@rogergl

rogergl commented Apr 6, 2015

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

This comment has been minimized.

Show comment
Hide comment
@StevenLangbroek

StevenLangbroek Apr 22, 2015

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

StevenLangbroek commented Apr 22, 2015

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

@amasad

This comment has been minimized.

Show comment
Hide comment
@amasad

amasad May 26, 2015

Contributor

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.

Contributor

amasad commented May 26, 2015

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

This comment has been minimized.

Show comment
Hide comment
@naoufal

naoufal May 27, 2015

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 commented May 27, 2015

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?

@rogergl

This comment has been minimized.

Show comment
Hide comment
@rogergl

rogergl May 27, 2015

@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);
        });
    });
});

rogergl commented May 27, 2015

@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 brentvatne changed the title from require('react-native') and jest test fails to [JS: Testing] require('react-native') and jest test fails May 30, 2015

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 30, 2015

Collaborator

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

Collaborator

brentvatne commented May 30, 2015

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

@naoufal

This comment has been minimized.

Show comment
Hide comment
@naoufal

naoufal May 30, 2015

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

naoufal commented May 30, 2015

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

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 30, 2015

Collaborator

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

Collaborator

brentvatne commented May 30, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@naoufal

naoufal May 31, 2015

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

naoufal commented May 31, 2015

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

@naoufal

This comment has been minimized.

Show comment
Hide comment
@naoufal

naoufal Jun 1, 2015

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

naoufal commented Jun 1, 2015

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

@Pajn

This comment has been minimized.

Show comment
Hide comment
@Pajn

Pajn Sep 26, 2015

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'

Pajn commented Sep 26, 2015

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

This comment has been minimized.

Show comment
Hide comment
@vitalets

vitalets Jan 27, 2016

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..

vitalets commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jan 30, 2016

Collaborator

cc @cpojer

Collaborator

brentvatne commented Jan 30, 2016

cc @cpojer

@taypo

This comment has been minimized.

Show comment
Hide comment
@taypo

taypo Mar 3, 2016

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

taypo commented Mar 3, 2016

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

@cpojer

This comment has been minimized.

Show comment
Hide comment
@cpojer

cpojer Mar 3, 2016

Contributor

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.

Contributor

cpojer commented Mar 3, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cpojer

cpojer Jul 27, 2016

Contributor

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

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

Contributor

cpojer commented Jul 27, 2016

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

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

@cpojer cpojer closed this Jul 27, 2016

@BillZito BillZito referenced this issue Oct 20, 2016

Open

[Testing] Client Testing #16

0 of 1 task complete

@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.