i try to write test for project in react-native for snapshot testing but when i run it always get error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
my code is
import React from 'react';
import {
cleanup,
fireEvent,
render,
screen,
} from '@testing-library/react-native';
import {Loader} from "../src/components";
describe('Render <Loader /> correctly', () => {
it('shows loading indicator when the data is being fetch', () => {
const { getByTestId } = render(<Loader loading={true} width={100} height={100} color={'red'}/>);
});
})
can't find {Loader} get undefined
"react-native": 0.71.11 "react-test-renderer": "18.2.0" "jest": "^29.6.2"
the loader path is valid and Loader is available
Loader.js is :
import React from 'react';
import {
StyleSheet, Text,
View
} from 'react-native';
import Animation from "../Animation/Animation";
import {
Colors
} from '../../themeConfigs';
const Loader = ( {loading, width = 100, height = 100, color = 'dark'}) => {
if (loading) {
return (
<Animation style={{width, height}} source={getAnimationFileByColor(color)}/>
)
}
};
function getAnimationFileByColor(color) {
switch (color) {
case 'dark': return require('../../animations/widget_loading.json');
case 'light': return require('../../animations/widget_loading.json');
default: return require('../../animations/widget_loading.json');
}
}
const styles = StyleSheet.create({
modalBackground: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: Colors.transparent
},
});
export {Loader};
and folder structure like below:
loader path : src/components/index.js
the path of test is in root at file _ test _