This is the error in the console: Cannot find module 'expo' from 'setup.js'.
Below is my code:
component.test.js:
import React from 'react';
import MyComponent from '../components/Component';
import renderer from 'react-test-renderer';
test('create component correctly', () =>{
const tree = renderer.create(
<MyComponent/>
).toJSON();
expect(tree).toMatchSnapshot();
});
Component.js:
import React, { Component } from 'react';
import {Text, View } from 'react-native';
export default class MyComponent extends React.Component{
render(){
return(
<View style={{flex: 1}}>
<View style={styles.cameraContainer}>
<Text> Test Component </Text>
</View>
</View>
);
}
}
When I try to use npm test the error that I mentioned before appears and I already try to uninstall and re-install jest and the error keeps showing.
Assuming you are using create-react-native-app, looks like this is coming from the "jest-expo" preset in the jest configuration.
Replace it with the react-native Jest preset, which is now built in to Jest:
jest.config.js:
module.exports = {
preset: 'react-native'
};
Or in package.json:
"jest": {
"preset": "react-native"
}
Related
I'm new to Jest and im trying to do unit tests to one component of my App in which i use Icons from #ui-kitten/components.
When trying to test i get the following Error:
console.error
The above error occurred in the <Icon> component:
at Icon (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\ui\icon\icon.component.tsx:87:34)
at DateIcon
at FalsyFC (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\#ui-kitten\components\devsupport\components\falsyFC\falsyFC.component.js:41:37)
at View
at View (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\mockComponent.js:28:18)
at View
at View (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\mockComponent.js:28:18)
at AnimatedComponent (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\Libraries\Animated\createAnimatedComponent.js:42:43)
at AnimatedComponentWrapper
at TouchableOpacity (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\Libraries\Components\Touchable\TouchableOpacity.js:53:37)
at TouchableWithoutFeedback (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\devsupport\components\touchableWithoutFeedback.component.tsx:32:1)
at Input (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\ui\input\input.component.tsx:141:1)
at Wrapper (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\theme\style\styled.tsx:104:3)
at Input
at RNCSafeAreaView
at RNCSafeAreaView (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\setup.js:332:22)
at vehicleFormtest
at View
at View (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\react-native\jest\mockComponent.js:28:18)
at ModalPanel (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\theme\modal\modalPanel.component.tsx:35:1)
at ThemeProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\#ui-kitten\components\theme\theme\themeProvider.component.js:46:37)
at MappingProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\#ui-kitten\components\theme\mapping\mappingProvider.component.js:39:37)
at StyleProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\node_modules\#ui-kitten\components\theme\style\styleProvider.component.js:46:37)
at ApplicationProvider (C:\Users\Cazam\Desktop\TT3\Testing-VraVa\src\components\theme\application\applicationProvider.component.tsx:105:46)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
VehicleFormtest.js
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { Icon, Input } from "#ui-kitten/components";
const DateIcon = (props) => <Icon {...props} name="calendar-outline" />;
const vehicleFormtest = () => (
<SafeAreaView style={{ flex: 1 }}>
<Input accessoryRight={DateIcon} />
</SafeAreaView>
);
export default vehicleFormtest;
VehicleFormtest.test.js
import React from "react";
import { render } from "#testing-library/react-native";
import * as eva from "#eva-design/eva";
import { ApplicationProvider, IconRegistry } from "#ui-kitten/components";
import VehicleFormtest from "./vehicleFormtest";
describe("<VehicleForm />", () => {
it("test", () => {
const tree = render(
<ApplicationProvider {...eva} theme={eva.light}>
<VehicleFormtest />
</ApplicationProvider>
);
});
});
Jest config on package.json
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?#react-native|react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|sentry-expo|native-base|#ui-kitten)"
]
Honestly i dont know if it's problem of the EvaIcons or something else on the jest configuration. Any help will be welcomed.
Using these versions
"#eva-design/eva": "^2.1.1"
"#ui-kitten/components": "^5.1.0",
"#ui-kitten/eva-icons": "^5.1.0",
Try this:
import React from "react";
import { render } from "#testing-library/react-native";
import * as eva from "#eva-design/eva";
import { ApplicationProvider, IconRegistry } from "#ui-
kitten/components";
import { EvaIconsPack } from "#ui-kitten/eva-icons";
import VehicleFormtest from "./vehicleFormtest";
describe("<VehicleForm />", () => {
it("test", () => {
const tree = render(
<ApplicationProvider {...eva} theme={eva.light}>
<IconRegistry icons={EvaIconsPack} />
<VehicleFormtest />
</ApplicationProvider>
);
});
});
I am using react-native to build an app. The app has 2 screens: HomeScreen and Search screen. The file explorer cant find the module for Search but the same path for HomeScreen is working. Also I am using android if it helps.
My App.js includes:
import React from 'react';
import type { Node } from 'react';
import { StatusBar } from 'react-native';
import Search from './src/screens/Search/index';
const App: () => Node = () => {
return (
<>
<StatusBar barStyle='dark-content' />
<Search />
</>
);
};
export default App;
Search/index.js includes
import React from "react";
import { View, Text } from "react-native-vector-icons";
const Search = (props) => {
return (
<View>
<Text>Hi</Text>
</View>
);
};
export default Search;
Error:
However if I replace Search by HomeScreen, the app works. Could you please help my figure out what I am doing wrong. I am using the same code and same directory search style in both my index.js files. However, I made HomeScreen/index.js before Search/index.js.
Here is my HomeScreen/index.js
import React from "react";
import { View, Text } from "react-native";
import HomeMap from '../../components/HomeScreenMap';
const HomeScreen = (props) => {
return (
<View>
<HomeMap />
</View>
);
};
export default HomeScreen;
Here is my directory:
MEDLIFE
>__tests__
>.vscode
>android
>ios
>node_modules
>src
>components
>screens
>HomeScreen
>index.js
>Search
>index.js
.buckconfig
.editorconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
app.json
babel.config.js
index.js
metro.config.js
package.json
yarn.lock
Change this:
import { View, Text } from "react-native-vector-icons";
To this:
import { View, Text } from "react-native";
I am developing an app in react-native while running the app I get this error.
My index.js file
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
My App.js file
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/store/Routes';
import 'react-native-gesture-handler';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#18163E" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
}); ```
While running i am getting above error and it is pointed to index.js file
This is missing.
import React, { Component } from 'react';
Your error message clearly states the React component missing.
In your App.js file add the below line:
import React, { Component } from 'react';
All of your react components should have this line.
After adding the above line your App.js file will appear as below:
import React, { Component } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/store/Routes';
import 'react-native-gesture-handler';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#18163E" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
});
Did you forget to import AppRegistry from react-native?
I started a new project with react-native. I created a component called Home.jsx in app/components/home/. It looks like this:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>This is the home component!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Home;
And my index.js (in the root) file looks like this:
import {AppRegistry} from 'react-native';
import Home from './app/components/home/Home';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Home);
When I try to load up the app in the the emulator, I get this error message:
error: bundling failed: Error: Unable to resolve module
`./app/components/home/Home` from
`/Users/[my_name]/repos/[repo_name]/index.js`:
The module `./app/components/home/Home` could not be found from
`/Users/[my_name]/repos/[repo_name]/index.js`. Indeed, none of these
files exist:
What am I doing wrong?
I got it working by not using a folder called app and instead using src. I'm not entirely sure why this solved the issue but there we go!
I am getting this error:
builded with expo
Trouble in import containers to main file app.js
SignIn code
import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';
export default class SignIn extends Component {
render() {
return (
<View>
<Text>
</Text>
</View>
);
}
}
App.js code
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
import SignIn from './app/containers';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>
Ma App
</Text>
<SignIn />
</View>
);
}
}
if I remove signIn it's work!
Error on screen
Most likely the path to your SignIn component is incorrect, or you are missing the index.js export. You can test this theory by console logging the component SignIn; you will find it prints undefined.
The reason is you are attempting to import a default module SignIn from path ./app/containers. Assuming that is a valid path, you are attempting to import the default export from ./app/containers/index.js. This is unlikely to be correct as the index.js (AKA barrel) purpose is to export multiple public modules from an app directory.
Assuming your index.js is defined correctly, and includes the following or similar.
export { default as SignIn } from './SignIn.js';
Then you should update your import of SignIn to import a named module instead of the default module; as follows.
import { SignIn} from './app/containers';
Alternatively, you could import the default module direct from the component's source file.
import SignIn from './app/containers/SignIn';
Hope this helps!