Skip to content
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

[Packager][Testing] Best way to get react native running with mocha #5392

Closed
lelandrichardson opened this issue Jan 19, 2016 · 10 comments
Closed
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@lelandrichardson
Copy link
Contributor

I'm trying to get React Native working with Enzyme (https://github.com/airbnb/enzyme) and am running into issues getting the project into a state where I can actually import the react-native module.

I'm trying to run mocha with the --compilers flag like so:

mocha --compilers js:babel-core/register

Additionally, i have the .babelrc that's in the packager folder in the root folder, with the following:

{
  "retainLines": true,
  "compact": true,
  "comments": false,
  "plugins": [
    "syntax-async-functions",
    "syntax-class-properties",
    "syntax-trailing-function-commas",
    "transform-class-properties",
    "transform-es2015-arrow-functions",
    "transform-es2015-block-scoping",
    "transform-es2015-classes",
    "transform-es2015-computed-properties",
    "transform-es2015-constants",
    "transform-es2015-destructuring",
    ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}],
    "transform-es2015-parameters",
    "transform-es2015-shorthand-properties",
    "transform-es2015-spread",
    "transform-es2015-template-literals",
    "transform-flow-strip-types",
    "transform-object-assign",
    "transform-object-rest-spread",
    "transform-react-display-name",
    "transform-react-jsx",
    "transform-regenerator",
    "transform-es2015-for-of"
  ],
  "sourceMaps": false
}

But it is throwing an error as soon as it runs into the object-rest-spread operator:

Users/leland_richardson/code/rn_enzyme_test_project/node_modules/react-native/Libraries/react-native/react-native.js:112
  ...require('React'),
  ^^^

SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at Module._extensions..js (module.js:432:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/leland_richardson/code/rn_enzyme_test_project/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/leland_richardson/code/rn_enzyme_test_project/test/MyComponent.js:1:80)
    at Module._compile (module.js:425:26)
    at loader (/Users/leland_richardson/code/rn_enzyme_test_project/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/leland_richardson/code/rn_enzyme_test_project/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at /Users/leland_richardson/code/rn_enzyme_test_project/node_modules/mocha/lib/mocha.js:216:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/leland_richardson/code/rn_enzyme_test_project/node_modules/mocha/lib/mocha.js:213:14)
    at Mocha.run (/Users/leland_richardson/code/rn_enzyme_test_project/node_modules/mocha/lib/mocha.js:453:10)
    at Object.<anonymous> (/Users/leland_richardson/code/rn_enzyme_test_project/node_modules/mocha/bin/_mocha:393:18)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)
    at startup (node.js:136:18)
    at node.js:972:3

I'd assume that since the transform-object-rest-spread is in the babelrc that this would work fine? What am I missing? Any help would be appreciated.

@lelandrichardson
Copy link
Contributor Author

cc @martinbigio or @amasad

@facebook-github-bot
Copy link
Contributor

Hey lelandrichardson, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

@lelandrichardson
Copy link
Contributor Author

OK, I figured it out... I forgot that babel-core/register ignores node_modules by default. Since RN's files arent compiled, this doesn't work out very well.

I was able to run this file on startup which got it done:

var fs = require('fs');
var path = require('path');

function getBabelRC() {
  var rcpath = path.join(__dirname, '..', '.babelrc');
  var source = fs.readFileSync(rcpath).toString();
  return JSON.parse(source);
}

var config = getBabelRC();

config.ignore = function(filename) {
  if (!(/\/node_modules\//).test(filename)) {
    return false; // if not in node_modules, we want to compile it
  } else if ((/\/node_modules\/react-native\//).test(filename)) {
    // its RN source code, so we want to compile it
    return false;
  } else {
    // it's in node modules and NOT RN source code
    return true;
  }
};

require("babel-register")(config);

global.__DEV__ = true;

@rlau1115
Copy link

Hi Leland, thanks for this and your great work on Enzyme.

Can you elaborate on: "I was able to run this file on startup which got it done:"?

I'm currently trying to setup mocha as well, but also having an issue with babel and node modules.

package.json:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "mocha --require ./test/setup.js 'test/**/*.@(js|jsx)'"
  },

./test/setup.js:

"use strict";

var fs = require('fs');
var path = require('path');

function getBabelRC() {
  var rcpath = path.join(__dirname, '..', '.babelrc');
  var source = fs.readFileSync(rcpath).toString();
  return JSON.parse(source);
}

var config = getBabelRC();

config.ignore = function(filename) {
  if (!(/\/node_modules\//).test(filename)) {
    return false; // if not in node_modules, we want to compile it
  } else if ((/\/node_modules\/react-native\//).test(filename)) {
    // its RN source code, so we want to compile it
    return false;
  } else {
    // it's in node modules and NOT RN source code
    return true;
  }
};

require("babel-core/register")(config);

global.__DEV__ = true;

var chai = require('chai');
var chaiImmutable = require('chai-immutable');

require("react-native-mock/mock");

global.expect = chai.expect;
chai.use(chaiImmutable);

.babelrc:

{ 
  "presets": ["stage-1", "react-native"]
}

@rlau1115
Copy link

Looks like this code is actually running as intended based on my previous post, but gets stuck on external node modules. The error I'm getting:

.../node_modules/react-native-button/Button.js:4
var {
    ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Module._extensions..js (module.js:422:10)
    at require.extensions.(anonymous function) (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/babel-core/node_modules/babel-register/lib/node.js:134:7)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/react/components/ecosystems/Welcome.js:5:12)
    at Module._compile (module.js:413:34)
    at loader (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/test/components/ecosystems/Welcome_spec.js:6:14)
    at Module._compile (module.js:413:34)
    at loader (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at /Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/mocha/lib/mocha.js:468:10)
    at Object.<anonymous> (/Users/noobs/Documents/Projects/Common Dev/Common/CommonNative/node_modules/mocha/bin/_mocha:403:18)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:141:18)
    at node.js:933:3

@esauter5
Copy link
Contributor

I've gotten past the spread issue, but now I'm having an issue with Platform

Error: Cannot find module 'Platform'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.Platform (react-native.js:95:27)
    at Object.<anonymous> (activity-indicator.js:4:19)
    at Module._compile (module.js:425:26)
    at loader (/Users/esauter/Code/Peach/DropBot/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/esauter/Code/Peach/DropBot/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (button.js:14:1)
    at Module._compile (module.js:425:26)
    at loader (/Users/esauter/Code/Peach/DropBot/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/esauter/Code/Peach/DropBot/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (button-test.js:7:1)
    at Module._compile (module.js:425:26)
    at loader (/Users/esauter/Code/Peach/DropBot/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/esauter/Code/Peach/DropBot/node_modules/babel-register/lib/node.js:136:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at /Users/esauter/Code/Peach/DropBot/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/esauter/Code/Peach/DropBot/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/Users/esauter/Code/Peach/DropBot/node_modules/mocha/lib/mocha.js:468:10)
    at Object.<anonymous> (/Users/esauter/Code/Peach/DropBot/node_modules/mocha/bin/_mocha:403:18)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)
    at startup (node.js:136:18)
    at node.js:972:3

Did either of you have an issue with this? Maybe it's not including the Platform modules because of the platform specific extensions .ios.js and .android.ios?

@alvaromb
Copy link
Contributor

alvaromb commented Apr 7, 2016

I'm having the same issue with tests and platform specific extensions. Do you have any workaround for that?

@esauter5
Copy link
Contributor

esauter5 commented Apr 7, 2016

@alvaromb: At the suggestion of @lelandrichardson, I started using his library https://github.com/lelandrichardson/react-native-mock. Not sure if it's a long term solution for me, but I was able to successfully run tests for now with it 👍

@shinout
Copy link

shinout commented Jul 28, 2016

Any solutions using react-native-packager?
Of course I know passing ignore regex to babel-register, but the essential solution should be using the same packager.

@messense
Copy link

Having the same issue with tests and platform specific extensions.

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

8 participants