I'm trying to do some unit testing for my React-native application, but I'm facing a weird issue here. I don't know where the issue is coming from. I looked on React-native GitHub and StackOverFlow, but i didn't find any solution for it.
So when i try to run this code on my test file App.test.js
import React from 'react';
import App from '../../App';
import renderer from 'react-test-renderer';
it('renders without crashing', () => {
const rendered = renderer.create(<App />).toJSON();
expect(rendered).toBeTruthy();
});
For my Package.json
{
"name": "Flashcards",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-cli": "20.0.4",
"jest-expo": "^21.0.2",
"react-dom": "^16.0.0",
"react-native-scripts": "1.5.0",
"react-script": "^2.0.5",
"react-test-renderer": "^16.0.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"array-shuffle": "^1.0.1",
"date-fns": "^1.29.0",
"expo": "^21.0.0",
"prop-types": "^15.6.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.48.4",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-navigation": "^1.0.0-beta.15",
"remote-redux-devtools": "^0.5.12"
}
}
The error that i'm having every time i try running yarn test
or npm test
FAIL src/__test__/App.test.js
● renders without crashing
TypeError: _this._scrollView.scrollTo is not a function
at TabViewPagerScroll._this._scrollTo (node_modules/react-native-tab-view/src/TabViewPagerScroll.js:90:19)
at TabViewPagerScroll.componentDidMount (node_modules/react-native-tab-view/src/TabViewPagerScroll.js:113:259)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5461:24)
at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6250:9)
at Object.invokeGuardedCallback$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2159:10)
at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
at commitAllWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6371:9)
at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6643:13)
at Object.invokeGuardedCallback$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2159:10)
at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
✕ renders without crashing (62ms)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.143s, estimated 1s
Ran all test suites related to changed files.
console.error node_modules/react-native/Libraries/Core/ExceptionsManager.js:73
The above error occurred in the <TabViewPagerScroll> component:
in TabViewPagerScroll (created by TabViewAnimated)
in View (created by View)
in View (created by TabViewAnimated)
in TabViewAnimated (created by TabView)
in TabView (created by withCachedChildNavigation(TabView))
in withCachedChildNavigation(TabView)
in Unknown (created by Navigator)
in Navigator (created by NavigationContainer)
in NavigationContainer (created by App)
in View (created by View)
in View (created by App)
in Provider (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at
Here is my App.js. By the way the app work perfectly fine
import React from 'react';
import {View} from 'react-native'
import AppNavigation from './src/navigation/AppNavigation'
import AppStatusBar from './src/navigation/AppStatusBar'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './src/utils/reducers'
import { setLocalNotification } from './src/utils/helpers'
export default class App extends React.Component {
componentDidMount() {
setLocalNotification()
}
render () {
return (
<Provider store={createStore(reducer)}>
<View style={{flex: 1}}>
<AppStatusBar />
<AppNavigation />
</View>
</Provider>
)
}
}
Thank you