fireEvent.press not working (React Native Testing Library)

Viewed 745

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?

0 Answers
Related