I am trying to mock a module that ships with react-native (not 3rd party modules), such as LayoutAnimation:
import * as RN from 'react-native'
RN.LayoutAnimation = jest.fn()
But the test fails with:
TypeError: Cannot read property 'decelerationRate' of undefined
at Object.<anonymous> (node_modules/react-native/Libraries/Components/WebView/WebView.ios.js:555:3254)
at Object.get WebView [as WebView] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:73:22)
Is there any other way to mock/stub out a RN module such as LayoutAnimation or any other react-native (not 3rd party) module?
Try to simply do jest.mock('LayoutAnimation');
You got this message because of line №217 in /node_modules/react-native/Libraries/Components/WebView/WebView.ios.js
decelerationRate: ScrollView.propTypes.decelerationRate
Because ScrollView is mocked ScrollView.propTypes === undefined
I solved this issue by adding:
import {PropTypes} from 'react';
ScrollView.propTypes = { decelerationRate: PropTypes.number };
to setup script file (file which set by setupTestFrameworkScriptFile property in jest section of package.json);
Related
I am using the Vue CLI Plugin Electron Builder and whenever I try to include electron ipcRenderer inside of my Vue component using
import ipcRenderer from 'electron'
I get this error
Module not found: Error: Can't resolve 'path' in '/Users/myname/IdeaProjects/project/node_modules/electron'
How would i fix this?
I eventually solved this by adding this to my vue.config.js
electronBuilder: {
preload: 'src/preload.js'
}
Then in my browser window I could load a preloader like normal.
Next in my preload i added this
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer
Now I can use window.ipcRenderer in the renderer!
Getting below error for any snapshot testing where the component is using following import
import { Auth } from 'aws-amplify';
Test suite failed to run
NetInfo must be passed to networkMonitor to enable reachability in React Native
at ReachabilityNavigator.Object.<anonymous>.ReachabilityNavigator.networkMonitor (node_modules/#aws-amplify/core/src/Util/Reachability.native.ts:20:10)
at Object.<anonymous> (node_modules/#aws-amplify/datastore/src/sync/datastoreReachability/index.native.ts:4:55)
at Object.<anonymous> (node_modules/#aws-amplify/datastore/src/sync/datastoreConnectivity.ts:3:1)
If you go to the aws-aplify code, that error is thrown in this networkMonitor function, which is called in this other place where #react-native-community/netinfo is used. Mocking the dependency as indicated in the lib README should fix the issue.
If you do not have a Jest Setup file configured, you should add the
following to your Jest settings and create the jest.setup.js file in
project root:
setupFiles: ['<rootDir>/jest.setup.js']
You should then add the
following to your Jest setup file to mock the NetInfo Native Module:
import mockRNCNetInfo from '#react-native-community/netinfo/jest/netinfo-mock.js';
jest.mock('#react-native-community/netinfo', () => mockRNCNetInfo);
I'm using the package react-native-localize to provide localization in an app. I've already linked the library and it works fine running on a device.
Issue:
When I test a component that imports react-native-localize. I get the error react-native-localize: NativeModule.RNLocalize is null.
In order to resolve this null error I call jest.mock('react-native-localize'); at the top of the test file. But I still get an error pointing to NativeModule.RNLocalize is null. I've also provided the mock as mentioned in the package README to no avail.
import 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
import * as RNLocalize from 'react-native-localize';
// mocking the module here with jest.mock
jest.mock('react-native-localize');
it('renders correctly', () => {
renderer.create(<App />);
});
Question:
How can you resolve a NativeModule.RNLocalize is null error in test?
Test Stack Trace:
FAIL __tests__/App-test.js
● Test suite failed to run
react-native-localize: NativeModule.RNLocalize is null. To fix this issue try these steps:
• Run `react-native link react-native-localize` in the project root.
• Rebuild and re-run the app.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
• Check that the library was linked correctly when you used the link command by running through the manual installation instructions in the README.
* If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.
If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-localize
16 |
17 | import {NavigationContainer} from '#react-navigation/native';
> 18 | import * as RNLocalize from 'react-native-localize';
| ^
19 | import {Icon} from 'native-base';
20 | import {createStackNavigator} from '#react-navigation/stack';
21 | const Stack = createStackNavigator();
at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/module.js:17:9)
at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/index.js:3:1)
at Object.<anonymous> (src/modules/AppView.js:18:1)
at Object.<anonymous> (src/modules/AppViewContainer.js:2:1)
at Object.<anonymous> (App.js:23:1)
at Object.<anonymous> (__tests__/App-test.js:7:1)
I fixed this issue in my tests by adding these lines in my jest configuration file
jest.mock("react-native-localize", () => {
return {
getLocales: jest.fn(),
// you can add other functions mock here that you are using
};
});
I found the solution :- paste this code in your jest configuration file (setup.js)
jest.mock("react-native-localize", () => {
getLocales: jest.fn(), // use getLocales if you have used this, else use the one that you have used
// you can add other functions mock here that you are using
};
});
I am trying to run jest cases in react native. I am using react-native-router-flux for navigation. My test cases are being failed with this error
Test suite failed to run
TypeError: Cannot read property 'isRTL' of undefined
at Object.<anonymous> (node_modules/react-native-router-flux/dist/NavBar.js:286:44)
at Object.<anonymous> (node_modules/react-native-router-flux/dist/navigationStore.js:7:13)
at Object.<anonymous> (node_modules/react-native-router-flux/dist/Reducer.js:74:36)
Exact line is transform:[{scaleX:_reactNative.I18nManager.isRTL?-1:1}]})
I tried different ways to mock but could not get it
One method is
import {I18nManager} from 'react-native'
I18nManager = {
isRTL : false
}
I put this snippet in jest initial configuration file but I got error like I18nManager is readonly
Actually I am using an explicit module factory that is being run instead of using Jest's automocking feature which is react-native-mock-render .
Like this
jest.mock('react-native', () => require('react-native-mock-render'), {
virtual: true
})
When I go through this lib code I could not found I18nManager in the mocks. So I forked that repo and added I18nManager file myself.
I would like to use https://github.com/dgladkov/react-native-image-rotate in react-native project
I download it with yarn add react-native-image-rotate
I link it with react-native link
I import it in my component with import ImageRotate from 'react-native-image-rotate';
But when I try to use it I have a Cannot read property 'rotateImage' of undefined
I put a break-point in node_modules/react-native-image-rotate/index.js on the line:
const RCTImageRotateModule = NativeModules.ImageRotateModule;
And in the object NativeModules there is no ImageRotateModule object.
How Can I add ImageRotateModule in NativeModules ?
Im using react-native 0.50.3
Thx
react-native link react-native-image-rotate