Currently, React Native dynamically requires a file for the running platform with an specific file extension, *.ios.js or *.android.js. However, when running this code inside a test environment, we get a require error because the module require('./module') cannot be found in the file tree, which looks like:
module.ios.js
module.android.js
How can we handle this issues in a test environment?
Adding platform specific extensions to moduleFileExtensions fixed the problem for me with jest.14.1. Credits to : github link
Here is a snippet from sample package.json which will run all files including scene.jest.js(x).
...
"jest": {
"verbose": true,
"preset": "jest-react-native",
"moduleFileExtensions": ["js", "android.js", "ios.js"],
"testRegex": "\\.scene\\.jest\\.jsx$"
}
...
As of Jest 17.0.0 you can use the defaultPlatform configuration for this - see the very bottom of the Jest React Native tutorial.
As it shows there, you would configure something like this:
"haste": {
"defaultPlatform": "ios",
"platforms": ["android", "ios"],
},
Naturally, this will mean your tests only load the iOS version of your component (or only Android, depending how you choose to configure it).
If you find it important to test both versions, you'll probably need to do something more like the solution mentioned in this issue, possibly manipulating Platform.OS and using require.requireActual directly.
(Might also want to track this issue, in case a less hacky solution is eventually found.)
It's kind of ugly and maybe there is a better solution but it seems that you can create a module.js file that will be used in tests but in platform environment it will still use the module.ios.js or module.android.js.
You need to create a custom compiler to resolve the platform specific dependencies in your tests. If you are using mocha, this will probably help you:
http://lidatang.com/setup-mocha-testing-react-native/
Related
I've gone through the 3 main causes of the infamous invalid hook call warning, and have determined that I have multiple versions of React in my app. I've confirmed this by this step:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
Based on my research, I understand that it is probably a dependency I have that is listing react as a dependency instead of a peer dependency, and that there are a few ways to solve this problem. However, I don't know how to figure out which package it is that is causing the issue.
There are lots of solutions online that are relevant to react (such as adding a webpack alias), but unfortunately are not for react-native. I have (perhaps naively) tried to add an alias with module-resolver to babel.config.js, but that did not work:
plugins: [
[
'module-resolver',
{
alias: path.resolve('node_modules/react'),
},
],
]
Figured this out after a long while. The issue was having react-dom library listed as a dependency. I'd read somewhere to do this to support jest testing, but I suppose that advice was dated.
Nonetheless the error was an obvious red herring, so hoping this can help someone out in the future
After using #react-native-community/async-storage and transpile it with the following npm command in my react-native environment.
"test": "NODE_ENV=test ./node_modules/.bin/mocha --timeout 5000 --require #babel/register \"./src/shared/__tests__/**/*.spec.js\""
I did some research and in no vain. But I found it happens to Jest too.
jest test fails after installing react-native-async-storage
this is my babel.config.js
module.exports = {
env: {
production: {
},
test: {
presets: [
'#babel/preset-env'
],
},
},
};
I'm only testing non-jsx code only so #babel/preset-env seems to be working alright.
node_modules/#react-native-community/async-storage/lib/index.js:5
import AsyncStorage from './AsyncStorage';
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
It seems like no one likes to answer jest newbie questions....
anyway, when starting to learn jest, I encountered some funny error messages that doesn't reflect the actual error. There are some possible situations a developer can consider.
You didn't to mock your module say A_module that is inside node_modules so one of the modules say B_modules inside A_modules uses a NativeModules from react so Jest cannot performa a test. Please look at stack trace or use a debugger to find out which one you prefer to mock.
Mock a module that uses NativeModules (similar to point 1, but more direct and concise )
You need to understand jest more thoroughly before you proceed. Reading documentation is good but jump to example when you think fit. especially check out the examples that you really need and read related ones. Many of the time, either your Babel setting or mocking methods is incorrect.
use jest.mock instead of jest.genMockFromModule. Why? there are some functions or init function that causes your test to crash at this statement. Because it calls NativeModules or something jest doesn't allow. use mock instead.
Solutions to this question: please refer to this most updated solution.
thanks
Basically my issue is that I get an error message, "__DEV__ is not defined" when I run jest. So I have read stackoverflow and other google posts on this. Some have suggested removing my .babelrc, but I actually need that file. Others have suggested adding
"globals": {
"__DEV__": true
}
To my package.json. I did that as well. I even deleted my node modules folder and re-installed. What should I do? Odd thing is that it was working before, but not now.
You can create a jest.config.json file in the root of your react-native project and add this globally as such
{
"jest": {
"globals": {
"__DEV__": true
}
}
}
Just add globals.DEV = true to your test file or set it in globals part of your jest settings
I got this when I was running Detox E2E tests inside of my react native app. Then use to work just fine but then I upgraded my mac OS and xcode and they started throwing Reference error DEV is not defined. Not sure why it was fine before and then broke after that.
My issue was fixed when I removed any code that was being imported from my react native app inside of the detox E2E tests. So the issue was importing any javascript from my app/ folder. I had a simple utility log function that wraps console.log which was the culprit. I did not need to modify any jest configs.
For anyone facing this issue I updated my jest by running in the terminal npm update jest this solved the issue for me.
There is a javascript library, pre-built and available on npm, that I wish to develop with/debug. In my case, it is openlayers.
In the classic way of requiring a javascript file and wanting to debug, one would just switch the script url from the production version to the debug version, ie:
to
However, when using webpack and then importing via npm:
import openlayers from 'openlayers'
Gets you the production distribution of the library, the same as the ol.js script from above.
On a side note, to stop webpack trying to parse a prebuilt library and throw a warning about that you must include something like this:
// Squash OL whinging
webpackConfig.module.noParse = [
/\/dist\/ol.*\.js/, // openlayers is pre-built
]
Back to the problem at hand: how can I conditionally load a different entry-point for a module prebuilt and imported like this?
Of course, I can do it in a hacky way. By going into the node_modules/openlayers/package.json and switching the browser field from
"browser": "dist/ol.js",
to
"browser": "dist/ol-debug.js",
Is there a way I can request a different entry point via webpack or by using a different import syntax? Do I first have to petition the library maintainers to update the browser field to allow different entry point hints to browsers, according to the spec? https://github.com/defunctzombie/package-browser-field-spec
Thoughts on a more effective way to make this happen? Yearning to be able to programmatically switch loading of the production and debug versions of a library based on env variables.
Webpack has configuration options for replacing a module into a different path: https://webpack.github.io/docs/configuration.html#resolve-alias
This resolves the openlayers import to use the debug version:
webpackConfig.resolve.alias: {
openlayers: 'openlayers/dist/ol-debug.js'
}
In my build system I have a function that takes the environment type and returns the matching webpackConfig. Based on the parameter I include the above snippet or not.
Full code: webpack-multi-config.js
I have two different (gulp-) tasks for development and production. For example the production task: webpackProduction.js
Line 1 imports the config script with production as type.
My build system is based on gulp starter.
I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT