I am writing unit tests for my React Native project. My main screen is WelcomScreen.js and inside it is following custom button created using TouchableOpacity:
<TouchableOpacity
testID={'selectEngButton'}
activeOpacity={0.4}
onPress={() => onSelectLanguage('en')}>
<View
// source={require('../../assets/images/ellipse.png')}
style={Styles.selectorView}>
<Image
source={require('../../assets/images/us.png')}
style={Styles.flagImage}
/>
</View>
<Image
source={
activeLanguage === 'en'
? darkMode
? activelangdotdark
: activelangdot
: darkMode
? inactivelangdotdark
: inactivelangdot
}
style={Styles.activityDot}
/>
</TouchableOpacity>
Following is method called onPress event:
const onSelectLanguage = (lang) => {
setActiveLanguage(lang);
i18n.changeLanguage(lang);
saveData(APP_LANG, lang);
};
Following is test for it:
import React from 'react';
import {Provider} from 'react-redux';
import {act, create} from 'react-test-renderer';
import ConfigureStore from '../src/redux/store';
import WelcomeScreen from '../src/screens/auth/WelcomeScreen';
import {ThemeContextProvider} from '../src/themes/themeProvider';
import {fireEvent, render} from '@testing-library/react-native';
const store = ConfigureStore();
jest.useFakeTimers();
describe('Welcom Screen tests', () => {
const navigation = {
navigate: jest.fn(),
};
const onSelectLanguage = jest.fn();
it('select english language', () => {
const {getByTestId} = render(
<Provider store={store}>
<ThemeContextProvider>
<WelcomeScreen navigation={navigation} />
</ThemeContextProvider>
</Provider>,
);
const button = getByTestId('selectEngButton');
console.log('btn002', button);
fireEvent.press(button);
expect(onSelectLanguage).toHaveBeenCalled();
});
});
But it gives me following error:
Welcome Screen tests › select english language
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
45 | fireEvent.press(button);
46 |
> 47 | expect(onSelectLanguage).toHaveBeenCalled();
| ^
48 | });
49 | });
50 |
at Object.<anonymous> (__tests__/WelcomeScreen-test.js:47:30)
I'm following official guide and doing exactly same things. But it doesn't fire onPress event on the component. What I'm doing wrong with it?