Testing a button click in React Native with Jest and enzyme

Question

I am new to testing react native apps with Jest and have no idea what i am doing. I have done some research online but most of the courses seem to be outdated.

I have an image within my app that when pressed takes the user to another screen. After doing some research it seems that using enzyme is the way to do this (this is most likely outdated and I am doing it wrong).

Here is my code.

import 'react-native';
import React from 'react';
import HomeScreen, { TouchableOpacity } from '../app/HomeScreen';
import { render, fireEvent } from 'react-native-testing-library';
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() })

it("can press the button", () => {
  
const onPressMock = jest.fn();

const button = shallow((<TouchableOpacity onPress={onPressMock} />));
button.find('button').simulate('click');
expect(onPressMock).toHaveBeenCalled();
expect(onPressMock.mock.calls.length).toEqual(1);
});

When I run my test with yarn I get the following error, is there any way to fix this?

Here is the code my HomeScreen

export default class HomeScreen extends React.Component 
{
 render() {
   
  return (
  <ScrollView>
     <View style={{flex:1}}>
     <TouchableOpacity onPress={() => this.props.navigation.navigate('Listen')}>
     <ImageBackground source={require('./bible.png')} style={{width: '100%', opacity: 0.8}}>
              <Text style={styles.MainText}>Sermons</Text>
              </ImageBackground>
         </TouchableOpacity>
         <TouchableOpacity onPress={() => this.props.navigation.navigate('Events')}>
      <ImageBackground source={require('./events.png')} style={{width: '100%', opacity: 0.8}}>
              <Text style={styles.MainText}>Events</Text>
         </ImageBackground>
         </TouchableOpacity>
         <TouchableOpacity onPress={() => this.props.navigation.navigate('Connect')}>
         <ImageBackground source={require('./connect.png')} style={{width: '100%', opacity: 0.8}}>
              <Text style={styles.MainText}>Connect</Text>
         </ImageBackground>
         </TouchableOpacity>
         <TouchableOpacity onPress={() => this.props.navigation.navigate('About')}>
      <ImageBackground source={require('./church.png')} style={{width: '100%', opacity: 0.8}}>
              <Text style={styles.MainText}>About</Text>
         </ImageBackground>
         </TouchableOpacity>
     </View>

    </ScrollView>
  )
 }
}

It seems that, at some point, you are setting a contextTypes property in TouchableOpacity component. Can you show the relevant code of the component? — mgarcia
– mgarcia, Commented Apr 14, 2020 at 19:30
It seems that in your test you are testing the TouchableOpacity component in ../app/HomeScreen. So, we need the code for that component. — mgarcia
– mgarcia, Commented Apr 15, 2020 at 13:27
Oh, I see now. I think your problem is that in your test you are importing TouchableOpacity from your HomeScreen component. But most probably, what you are trying to import is the component from react-native. Could that be the problem? — mgarcia
– mgarcia, Commented Apr 15, 2020 at 15:50

Fabian Almaraz Ruvalcaba · Accepted Answer · 2020-08-31 20:55:40Z

1

You should import TouchableOpacity from 'react-native' in your test, then, try using "mount" (from the 'enzyme' package as well) instead of "shallow" to create your constant "button", that should do it.

answered Aug 31, 2020 at 20:55

Fabian Almaraz Ruvalcaba

1813 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing a button click in React Native with Jest and enzyme

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related