react-native jest and react-test-renderer always get error Element type is invalid and undefined

112 views Asked by At

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 _

0

There are 0 answers