Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to fix TypeError: navigation.setOptions is not a function

$
0
0

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={({})} />);

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>