I'm trying to implement react native test library with jest to my app.
For now I have a problem with the navigation on my component.
When I'm running the test, I've got an error :
TypeError: navigation.setOptions is not a function
Here is my component:
const initialState: StateTypes = { toShowAsGridLayout: false, isLoadingMoreContacts: false};export const Main: FC<Props> = ({ navigation }) => { const dispatch = useDispatch(); const { data } = useSelector((state: RootState) => state.appReducer); const [state, setState] = useState<StateTypes>(initialState); useLayoutEffect(() => { navigation.setOptions({ title: state.isLoadingMoreContacts ? strings.LOADING : strings.ALL_CONTACTS +' - '+ data.length, headerRight: () => (<TouchableOpacity style={styles.changeLayoutButton} onPress={changeLayout}><Text style={styles.changeLayoutText}>{state.toShowAsGridLayout ? strings.LIST : strings.GRID}</Text></TouchableOpacity> ) }); }, [state.isLoadingMoreContacts, state.toShowAsGridLayout]) return (<View style={styles.container}> {renderLayout()}</View> );};
Here is a router:
const SplashStack = createStackNavigator();const MainStack = createStackNavigator();export const RootNavigator = () => { const { isDataLoading } = useSelector((state: RootState) => state.appReducer); return ( isDataLoading ? <SplashStack.Navigator><SplashStack.Screen name={'SplashStack'} component={Splash} /></SplashStack.Navigator> : <MainStack.Navigator><MainStack.Screen name={'Main'} component={Main} /><MainStack.Screen name={'ContactDetails'} component={ContactDetails} /></MainStack.Navigator> );};
And a test itself:
import React from 'react';import { render } from '@testing-library/react-native';import { Main } from '../Main';import * as redux from 'react-redux';import strings from '../../constants/strings';import mocks from '../../mocks';describe('dispatch mock', () => { it('should dispatch mock', () => { const useDispatchSpy = jest.spyOn(redux, 'useDispatch'); const useSelectorSpy = jest.spyOn(redux, 'useSelector'); const mockDispatchFn = jest.fn(); useDispatchSpy.mockReturnValue(mockDispatchFn); useSelectorSpy.mockReturnValue({ data: mocks }); const { getByText } = render(<Main navigation={({})} />); getByText(strings.ALL_CONTACTS); });});
How can i fix this error ? What should I pass to navigation props in line :
const { getByText } = render(<Main navigation={({})} />);