I'm using the react-native source from git for project dependency,
I put the RN source in an external directory(instead of node_modules) and add it to the extraNodeModules in rn-cli.js, so the RN packager could find all the source correctly.
but when running jest, it couldn't find any RN builtin components.
test file:
import { View } from 'react-native';
import React from 'react';
import mockCamera from '../__mocks__/camera';
import renderer from 'react-test-renderer';
jest.mock('react-native-camera', () => mockCamera);
var TableIDInputer = props => <View />;
test('renders correctly', () => {
const component = renderer.create(<TableIDInputer />);
let tree = component.toJSON();
expect(tree.type).not.toBe('b');
expect(tree).toMatchSnapshot();
});
test result:
● renders correctly
Cannot find module 'View' from 'react-native-implementation.js'
146 | },
147 | get View() {
> 148 | return require('View');
149 | },
150 | get ViewPagerAndroid() {
151 | return require('ViewPagerAndroid');
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:169:17)
at Object.get View [as View] (../../libs/react-native/Libraries/react-native/react-native-implementation.js:148:12)
at TableIDInputer (__tests__/test-component.js:7:31)
at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4137:15)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4541:16)
because the View component is provided by a haste module, which was implemented by #providesModule before, but today it seems it's replaced by a new mechanism, so I'm doubting is it causing the test fail??
env info:
jest: ^22.4.3
react-native: 2018-5-31 6e359c4589b0627de59332ce56fe28804425a609
Related
A clean-slate creation of an Expo-based React-Native app (npx create-expo-app my-app) and then installing react-native-elements runs fine on IOS, but generates the error below for running on the web. I also tried using the template provided by react-native-elements but wind-up with the same result.
Module parse failed: Unexpected token (7:58)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders
| import { defaultSpacing } from './theme';
| import { lightColors } from './colors';
> const isClassComponent = (Component) =>
Boolean(Component?.prototype?.isReactComponent);
| const combineByStyles = (propName = '') => {
| if (propName.endsWith('Style') || propName.endsWith('style')) {
at ./node_modules/#rneui/themed/dist/config/withTheme.js```
Start to test view for React Native 0.68.2/jest 29/react-test-renderer 17.0.2 app. The test case is simple:
import renderer from 'react-test-renderer'; //<<==import causes open handler and jest can't exit
import Home from './Home'; //<<== test Home page view
it ('describe Home page view', () => {
const home = renderer.create(<Home />).toJSON();
expect(home).toMatchSnapshot();
})
Here is the output of yarn jest --detectOpenHandles:
Jest has detected the following 1 open handle potentially keeping Jest from exiting:
● MESSAGEPORT
> 1 | import renderer from 'react-test-renderer';
| ^
2 | import Home from './Home';
3 |
4 | it ('describe Home page view', () => {
at node_modules/scheduler/cjs/scheduler.development.js:178:17
at Object.<anonymous> (node_modules/scheduler/cjs/scheduler.development.js:13:3)
at Object.require (node_modules/scheduler/index.js:6:20)
at require (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:19:19)
at Object.<anonymous> (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13:3)
at Object.require (node_modules/react-test-renderer/index.js:6:20)
at Object.<anonymous> (src/components/home/Home.test.js:1:1)
at asyncGeneratorStep (node_modules/#babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/#babel/runtime/helpers/asyncToGenerator.js:25:9)
The jest can exit by itself and has to be terminated forcefully. What caused the error here?
I have a toMatchSnapshot test on a simple component with React Native 0.68.2/jest 29.0. Here is the component SysError:
import React, {useState, useContext, Component} from 'react';
import {Platform, Button, Text, TouchableOpacity } from 'react-native';
export default function SysError({route}) {
const message = route.params.message;
return (
<Text>{message}. System NOT available right now. Try again later</Text>
)
};
Here is the SysError.test.js:
import React from 'react';
import renderer from 'react-test-renderer'; //<<==v17.0.2
import SysError from './SysError';
it ('describe SysError page view with no message', () => {
const route = {params: {message:"noth"}};
const tree = renderer.create(<SysError route={route} />).toJSON();
expect(tree).toMatchSnapshot();
})
After yarn test --detectOpenHandle, test passes but is not exiting by itself. Here is the error for component SysError:
Jest has detected the following 2 open handles potentially keeping Jest from exiting:
● MESSAGEPORT
1 | import React from 'react';
> 2 | import renderer from 'react-test-renderer';
| ^
3 | import SysError from './SysError';
4 |
5 | it ('describe SysError page view with no message', () => {
at node_modules/scheduler/cjs/scheduler.development.js:178:17
at Object.<anonymous> (node_modules/scheduler/cjs/scheduler.development.js:13:3)
at Object.require (node_modules/scheduler/index.js:6:20)
at require (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:19:19)
at Object.<anonymous> (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13:3)
at Object.require (node_modules/react-test-renderer/index.js:6:20)
at Object.<anonymous> (src/components/app/SysError.test.js:2:1)
at asyncGeneratorStep (node_modules/#babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/#babel/runtime/helpers/asyncToGenerator.js:25:9)
There is no async call in SysError.js and what is missing here?
This seems to be caused by the scheduler package.
It was supposed to be fixed in React 17.1.0 but that never came around. There was even an issue for it.
What you can do, is any of the following:
Upgrade to React 18+ (Expo SDK 46+) and the corresponding RN version.
Use delete global.MessageChannel; which should do in your file where the issue is occurring.
Install the react-16-node-hanging-test-fix with yarn add react-16-node-hanging-test-fix or npm install react-16-node-hanging-test-fix which was made by a React core team member Dan Abramaov. This package essentially does step 2 with greater safety due to some checks and stuff.
I try to build Vue web-component with UIkit as UI library. After proper build with command:
npm run build -- --target wc --inline-vue --name my-element 'src/App.vue'
When I'm trying to embed component in other website UIkit styles are displayed properly, but UIkit instance which handles modal, dropdowns is undefined.
vue.runtime.esm.js:1888 TypeError: Cannot read property 'modal' of undefined
Here is main.js file where I initialize global UIkit variable.
import App from "./App.vue"
import wrap from "#vue/web-component-wrapper"
import Vue from "vue"
import VueFlatPickr from "vue-flatpickr-component"
import uk from "uikit"
import Icons from "uikit/dist/js/uikit-icons.js"
import "flatpickr/dist/flatpickr.css"
uk.use(Icons)
Vue.config.productionTip = true
Vue.use(VueFlatPickr)
Vue.mixin({
data: function() {
return {
get uk() {
return uk
},
}
},
})
const app = new Vue({
render: (h) => h(App)
})
app.$mount("#app")
const WrapperElem = wrap(Vue, App)
window.customElements.define("my-element", WrapperElem)
And here a little example of code how I use it and where the trouble occurs:
this.uk.modal("#delete-dialog").hide()
I've seen your question on the discord channel - I do not have a solution for your question BUT i have already successfully used UIkit 3 and Vue 3 in two of my projects with this base, may it helps you:
https://medium.com/#4ravind/uikit-with-vuejs-vue-cli-3-db811e43c46b
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
};
});