私は自分のアプリに反応するネイティブ テスト ライブラリを jest で実装しようとしています。
今のところ、コンポーネントのナビゲーションに問題があります。
テストを実行しているときにエラーが発生しました:
TypeError: navigation.setOptions is not a function
ここに私のコンポーネントがあります:
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>
);
};
ここにルーターがあります:
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>
);
};
そしてテスト自体:
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);
});
});
このエラーを修正するにはどうすればよいですか? 行のナビゲーション小道具に何を渡す必要がありますか:
const { getByText } = render(<Main navigation={({})} />);