I'm trying to set up Enzyme testing for my React Native project. I've been getting various errors in various scenarios.
Scenario 1
When I try to set up a test for one of my components, I get this error:
/Users/TuzMacbookPro2017/Development/QMG-local/APPS/ELECTRO/node_modules/#expo/vector-icons/Zocial.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Zocial.json';
^^^^^^^^
SyntaxError: Unexpected identifier
Some relevant files
test file
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import LoginView from "../src/screens/LoginView";
describe("LoginView", () => {
const wrapper = mount(<LoginView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
jest.config.js
module.exports = {
setupFilesAfterEnv: ["<rootDir>setup-tests.js"],
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|#react-native-community|react-native-elements)"
],
preset: "react-native"
};
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"]
};
};
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll --bail",
"testff": "node ./node_modules/jest/bin/jest.js --watchAll --bail"
},
"jest": {
"preset": "jest-expo",
"testEnvironment": "node",
"globals": {
"__DEV__": true
}
},
"dependencies": {
"#expo/samples": "2.1.1",
"#react-native-community/async-storage": "^1.3.4",
"axios": "^0.18.0",
"expo": "^32.0.0",
"flow-bin": "^0.98.1",
"native-base": "^2.12.1",
"pluralize": "^7.0.0",
"react": "16.5.0",
"react-dom": "^16.8.6",
"react-native": "0.57",
"react-native-elements": "^1.1.0",
"react-native-geocoding": "^0.3.0",
"react-native-global-font": "^1.0.2",
"react-native-indicators": "^0.13.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-render-html": "^4.1.2",
"react-native-uuid": "^1.4.9",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"redux-test-utils": "^0.3.0",
"redux-thunk": "^2.3.0",
"sugar": "^2.0.6"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"axios-mock-adapter": "^1.16.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-preset-expo": "^5.0.0",
"babel-preset-react-native": "^4.0.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"fetch-mock": "^7.3.3",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.2",
"jest-expo": "^32.0.0",
"jsdom": "^14.1.0",
"mock-async-storage": "^2.1.0",
"prettier-eslint": "^8.8.2",
"react-test-renderer": "^16.8.6",
"redux-mock-store": "^1.5.3",
"redux-saga-tester": "^1.0.460"
},
"private": true,
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
setup.tests.js
import Adapter from "enzyme-adapter-react-16";
import { configure } from "enzyme";
import jsdom from "jsdom";
import "react-native";
import "jest-enzyme";
function setUpDomEnvironment() {
const { JSDOM } = jsdom;
const dom = new JSDOM("<!doctype html><html><body></body></html>", {
url: "http://localhost/"
});
const { window } = dom;
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
copyProps(window, global);
}
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === "undefined")
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
setUpDomEnvironment();
configure({ adapter: new Adapter() });
imports from the component under test
import React, { Component } from "react";
import {
Image,
Input,
Button,
ThemeProvider,
Overlay
} from "react-native-elements";
import { View, Text, Picker } from "react-native";
import { DotIndicator } from "react-native-indicators";
import { connect } from "react-redux";
import { login, assignUser } from "../redux/actions/authActions";
import F8StyleSheet from "../components/F8StyleSheet";
import { Dropdown } from "react-native-material-dropdown";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
import User from "../models/User";
import uuid from "react-native-uuid";
Scenario 2
So that's a problem, but then something else interesting happens. When I swap out my LoginView for a super simple component, the test runs, but brings up some new errors that cast some suspicion on my rendering setup.
SimpleView.js
import React from "react";
import { Text, View } from "react-native";
export default (SimpleView = ({ params }) => (
<View>
<Text>SimpleView</Text>
</View>
));
test
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import SimpleView from "./__mocks__/SimpleView";
describe("LoginView", () => {
const wrapper = mount(<SimpleView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
errors
PASS tests/LoginView.test.js (6.058s)
LoginView
✓ can get through the damn test file (4ms)
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <Text /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <Text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <View /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <View> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
One reason for your issue could be the "preset": "react-native" line in your jest.config.js. Try changing it to "preset": "jest-expo". This is the way the expo documentation (https://docs.expo.io/versions/v35.0.0/guides/testing-with-jest/) explains how to setup jest with your project.
I encountered the same issue, and can't find a solution. So I had to mute error output:
jest --silent
ref: https://stackoverflow.com/a/49591765/4975761
Related
Error I'm getting Anytime I run npm test:
FAIL ./App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/bestes/Desktop/react-native-training/node_modules/react-native-status-bar-height/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Dimensions, Platform, StatusBar } from 'react-native';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/react-native-elements/src/config/index.js:1:1)
My Test:
import 'react-native';
import React from 'react';
import { render } from '#/../testing/test-utils'
import App from './App'
test('should render app component', () => {
const result = render(<App />)
expect(result).toMatchSnapshot()
})
My test-utils.js file:
import React from 'react'
import { render } from '#testing-library/react-native'
import { store } from '#/bootstrap/redux'
import { Provider } from 'react-redux'
const AllTheProviders = ({ children }) => {
return (
<Provider store={store}>
{children}
</Provider>
)
}
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options })
// re-export everything
export * from '#testing-library/react-native'
// override render method
export { customRender as render }
My package.json file:
{
"name": "ReactNativeTraining",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/geolocation": "2.0.2",
"#react-native-community/masked-view": "0.1.10",
"#react-native-picker/picker": "1.9.10",
"#reduxjs/toolkit": "1.5.0",
"axios": "0.21.1",
"dayjs": "1.10.4",
"lodash": "4.17.20",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-config": "1.4.2",
"react-native-elements": "3.0.0-alpha.1",
"react-native-geocoding": "0.5.0",
"react-native-gesture-handler": "1.9.0",
"react-native-permissions": "3.0.0",
"react-native-picker-select": "8.0.4",
"react-native-reanimated": "1.13.2",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "2.17.0",
"react-native-size-matters": "0.4.0",
"react-native-vector-icons": "8.0.0",
"react-navigation": "4.0.2",
"react-navigation-stack": "1.5.4",
"react-navigation-tabs": "2.4.1",
"react-redux": "7.2.2"
},
"devDependencies": {
"#babel/core": "7.12.10",
"#babel/runtime": "7.12.5",
"#react-native-community/eslint-config": "2.0.0",
"#testing-library/jest-native": "4.0.1",
"#testing-library/react-native": "7.2.0",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "4.0.0",
"eslint": "7.18.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-test-renderer": "16.13.1"
},
"type": "module",
"jest": {
"verbose": true,
"preset": "react-native",
"setupFilesAfterEnv": ["#testing-library/jest-native/extend-expect"],
"transformIgnorePatterns": [
"node_modules/(?!(react-native",
"#react-native-community/geolocation",
"#react-native-community/masked-view",
"|#react-native-picker/picker",
"|#reduxjs/toolkit",
"|axios",
"|dayjs",
"|lodash",
"|react",
"|react-native",
"|react-native-config",
"|react-native-elements",
"|react-native-geocoding",
"|react-native-gesture-handler",
"|react-native-permissions",
"|react-native-picker-select",
"|react-native-reanimated",
"|react-native-safe-area-context",
"|react-native-screens",
"|react-native-size-matters",
"|react-native-vector-icons",
"|react-navigation",
"|react-navigation-stack",
"|react-navigation-tabs",
"|react-redux",
")/)"
]
}
}
My babel.config.js file:
module.exports = function (api) {
api.cache(true)
const presets = [
'module:metro-react-native-babel-preset'
]
const plugins = [
[
'module-resolver', {
'root': ['./src/'],
'extensions': ['.js', '.ios.js', '.android.js'],
'alias': {
'#': './src/'
}
}
]
]
return {
presets,
plugins
}
}
What I've tried:
Adding "type": "module" to my root level package.json file, which fixed a similar error with exporting,
Adding Transform Ignore Patterns to the Jest key in the package.json file.
I'd added ALL of my dependencies to the transformIgnorePatterns as it kept throwing errors on each one, until I added all and now it throws on react-native modules imports.
[Solved] Work for me
Install below
npm install --save-dev #babel/core
npm install --save-dev #babel/preset-env
after that create the "babel.config.js" file in the root and that content should be as below
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
env: {
test: {
plugins: ["#babel/plugin-transform-runtime"]
}
}
};
I have a problem when I try to add a bottomnavigation in my app on the main screen:
This is the main screen code:
// Main.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import firebase from 'react-native-firebase';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
export default class Main extends React.Component {
state = { currentUser: null }
componentDidMount() {
const { currentUser } = firebase.auth()
this.setState({ currentUser })
}
render() {
const { currentUser } = this.state
return (
<View style={styles.container}>
<Text>
Hi {currentUser && currentUser.email}!
</Text>
</View>
)
}
}
const bottomTabNavigator = createBottomTabNavigator(
{
Main: Main,
},
{
initialRouteName: 'Main'
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
No when I run it I get this error:
Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/en/hello-react-navigation.html for usage guide.
<unknown>
index.bundle?platform=ios&dev=true&minify=false:109707:24
<global>
Main.js:24
loadModuleImplementation
require.js:322:6
guardedLoadModule
require.js:201:45
runUpdatedModule
require.js:657:17
metroHotUpdateModule
require.js:533:8
define
require.js:53:24
global code
Main.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
[native code]:0
inject
injectUpdate.js:62:35
forEach
[native code]:0
injectUpdate
injectUpdate.js:71:26
on$argument_1
HMRClient.js:40:21
emit
index.js:202:37
_ws.onmessage
WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
WebSocket.js:232:27
emit
EventEmitter.js:190:12
callFunctionReturnFlushedQueue
[native code]:0
So i checked my package file which is:
{
"name": "kowop",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/bottom-tabs": "^5.0.3",
"#react-navigation/material-bottom-tabs": "^5.0.1",
"#react-navigation/native": "^5.0.1",
"email-validator": "^2.0.4",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-paper": "^3.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.0.0-beta.2",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.0.16",
"typescript": "^3.7.5"
},
"devDependencies": {
"#babel/core": "7.8.3",
"#babel/runtime": "7.8.3",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "^6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.4",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
But apparently react-navigation can't be updated above 4.11 or at least that is what the npm page says.
244,663
Version
4.1.1
License
MIT
Unpacked Size
41 kB
Total Files
12
Issues
133
Pull Requests
3
So I am a bit lost here. Does anyone see what I do wrong?
Thanks a lot!
Tim
You are using react-navigation v5 dependencies but in your code you implement with v4 api way.
You should change react-navigation dependencies to v4 to make your code work.
I made you code work on snack : demo
I am trying to build a navigation where I have a problem when I add
{
initialRouteName: 'Loading',
}
When I use the stacknavigator without initialRouteName everything works fine. I am working on ios simulation (react-native run-ios) and I tried pod install already a few times.
This is app.js
import React from 'react';
import Loading from './Loading';
import SignUp from './SignUp';
import Login from './Login';
import Main from './Main';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator(
{
Home: Loading,
Home: SignUp,
Home: Login,
Home: Main,
},
{
initialRouteName: 'Loading',
}
);
export default createAppContainer(AppNavigator);
This is the error:
TypeError: undefined is not an object (evaluating 'routeConfigs[initialRouteName].params')
This error is located at:
in NavigationContainer (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
getInitialState
StackRouter.js:1:2241
getStateForAction
StackRouter.js:1:4880
NavigationContainer
index.bundle?platform=ios&dev=true&minify=false:99867:102
renderRoot
[native code]:0
runRootCallback
[native code]:0
unstable_runWithPriority
scheduler.development.js:643:23
failedRoots.forEach$argument_0
react-refresh-runtime.development.js:201:29
forEach
[native code]:0
failedRoots.forEach$argument_0
react-refresh-runtime.development.js:193:24
Refresh.performReactRefresh
setUpReactRefresh.js:43:6
setTimeout$argument_0
require.js:609:10
_callTimer
JSTimers.js:146:14
callTimers
JSTimers.js:399:17
callFunctionReturnFlushedQueue
[native code]:0
Here is my package.json
{
"name": "kowop",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-screens": "^2.0.0-alpha.32",
"react-navigation": "^4.1.0",
"react-navigation-stack": "^2.0.16"
},
"devDependencies": {
"#babel/core": "7.8.3",
"#babel/runtime": "7.8.3",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.4",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Does anyone have an idea what the problem may be?
Thanks a lot!
Tim
As I know, initialroutename is using by indexed name, not screen name. In your project, you have to use 'Home'.
So you have to use different name between screens. like,
const AppNavigator = createStackNavigator(
{
loading: Loading,
signUp: SignUp,
login: Login,
main: Main,
},
{
initialRouteName: 'loading',
}
);
Aside, I think use name 'Home' for four screen is very bad idea. You have to try use different name between screens.
Change this :
{
initialRouteName: 'Loading',
}
To :
{
initialRouteName: 'Home',
}
Screen key should be passed to initialRouteName as param
Thanks, I was indeed not referring to the screen.
I am trying to make android application with react native.After creating project and install all dependencies i want to use use Hook inside navigator like this:
const MainNavigator = createStackNavigator({
Dashboard: DashboardScreen,
ListSurveyor: {
screen: topSurvayorsNavigator,
navigationOptions: ({ navigation }) => {
const dispatch = useDispatch();
const [term, setTerm] = useState('');
const searchServeyor = (item) => {
console.log('nav: ', item);
dispatch(survayouActions.searchSurveyouList(item))
}
switch (navigation.state.routes[navigation.state.index]["routeName"]) {
case "ActiveSurveyor":
return {
header: () => <CustomHeader
title='Active'
// term={term}
// onTermChange={setTerm}
onTermSubmit={searchServeyor}
/>
}
case "DeActiveSurveyor":
return {
header: () => <CustomHeader
title='DisActive'
onTermSubmit={searchServeyor}
/>
}
default:
return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
}
}
},
Audited: AuditedFileNumSurveyor,
}, {
defaultNavigationOptions: defaultNavOptions
});
I imported useState and useDispatch like below:
import React, { useState } from 'react';
import { useDispatch } from "react-redux";
But When i run application i got this error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.
I used hook inside method navigationOptions: ({ navigation }) => { but what is happen?
This is package.json information:
{
"name": "RNMngm",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"base-64": "^0.1.0",
"prop-types": "^15.7.2",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-charts-wrapper": "^0.5.7",
"react-native-gesture-handler": "^1.5.2",
"react-native-paper": "^3.4.0",
"react-native-reanimated": "^1.4.0",
"react-native-svg": "^10.0.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-header-buttons": "^3.0.4",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.7.0",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "7.7.7",
"#babel/runtime": "7.7.7",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.3",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Hooks can only be used in a component, and cannot be used in navigator or navigationOptions. If u need to use state in navigator or navigationOptions, u need to setParams in the component and then use the getParam method in navigationOptions
I am trying to build the taxi booking app. From i get the error
undefined is not an object (evaluating'_react2.Proptypes.store'). I have tried all the other solutions in previously asked but it was not helpful. Any help on this is appreciated.
import React, { Component, PropTypes} from "react";
import { Router } from "react-native-router-flux";
import scenes from "../routes/scenes";
import { Provider } from "react-redux";
export default class AppContainer extends Component{
static propTypes = {
store: PropTypes.object.isRequired
}
render(){
return(
<Provider store = {this.props.store}>
<Router scenes = {scenes} />
</Provider>
)
}
}
package.json
{
"name": "TaxiApp",
"version": "0.0.7",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.3.5",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-addons-update": "^15.6.2",
"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Ever since react version 16.0.0 forward, prop types cannot be taken from React itself as you did on the first line. You need to do the following;
npm install prop-types --save
Add the following import and remove the PropTypes from first line:
import PropTypes from 'prop-types';
After this, it should work like a charm.