How to get method instance in component after @testing-library/react-native render

Question

SplashScreen is a React Native 0.70 component. generatePrivateKey.After rendering the component SplashScreen in jest 0.29, how to get the instance of method generatePrivateKey for further testing? The code below does not work

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { render, cleanup, screen, fireEvent, waitFor } from "@testing-library/react-native";
import SplashScreen from './SplashScreen';

describe ('Splash screen when launching the app' , () => {
    test ('generate private key method shall work', () => {
        const navigation = () => {
            return {navigate:jest.fn()}
        };

        const component = ( <NavigationContainer>
                                <SplashScreen navigation={navigation}  />
                            </NavigationContainer>);

        const wrapper = render(component);
        const inst = screen.instance.generatePrivatekey();  //NOT working. generatePrivateKey is a method to be tested
        //const inst = wrapper.getByType(SplashScreen).instance.generatePrivateKey() //NOT working
        expect(inst).toBeCalledOnce();
    });

})

UPDATE:

Here is the view of the SplashScreen. Method generatePrivateKey is activated by user's click.

return (
    
    <View style={styles.viewStyles}>
      <Text h1 style={styles.textHeader}>Splash Screen</Text>
      <Image 
        source={imageFile}
        style={{ width:200,height:250 }}
      />
      <Spinner
          visible={spinner}
          textContent={message}
          textStyle={styles.spinnerTextStyle}
      />
      <View style={{width:"80%" }}>
        <Modal
              style={{alignItems:"center", alignContent:"center"}}
              animationType="slide"
              transparent={false}
              visible={modalVisible}
              onBackdropPress={() => setModalVisible(false)}
              onRequestClose={() => {
                setModalVisible(!modalVisible);
              }}
            > 
          <View style={[styles.centeredView, styles.modalView]}>     
              <Text style={{padding:20}}>{keyHint}</Text>
              <TextInput autoFocus={true} editable={!disableKeyInput} value={privateKey} onChangeText={keyChange} placeholder={keyPlaceholder} style={styles.textTitle} />             
              {genPrivKey ? <Button style={styles.button} 
                        onPress={generatePrivatekey} 
                        title={"生成(新)密钥"}/> :
                  <Button style={styles.button} 
                  onPress={savePrivateKey} 
                  title={"保存"}/> 
              }                                     
          </View>
        </Modal>
      </View>  
    </View>
    
  );

How does the `generatePrivatekey` function be called in your component? Show the code. — Lin Du, Nov 22 '22 at 09:45

score 0 · Answer 1 · answered Jan 11 '23 at 15:13

You are doing it in the wrong way.

You can't access methods of the functional component.
To do it correctly you have to fire press event (see user-events lib) on the button that triggers generatePrivatekey func and check whether something inside its body has been called

How to get method instance in component after @testing-library/react-native render

1 Answers1