使用Jest和酶测试React Native中的按钮单击

Question

我是刚接触Jest测试本机应用程序的新手，不知道我在做什么。我已经在网上进行了一些研究，但大多数课程似乎已经过时了。

我的应用程序中有一幅图像，按下该图像会将用户带到另一个屏幕。经过一些研究后，似乎使用酶可以做到这一点（这很可能已经过时了，我做错了。）

这是我的代码。

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);
});

用纱进行测试时，出现以下错误，有什么办法可以解决？

这是我的主屏幕代码

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>
  )
 }
}

Answer 1

您应该在测试中从“ react-native”导入TouchableOpacity，然后尝试使用“ mount”（也来自“ enzyme”包）而不是“ shallow”来创建常量“ button”，这应该它。