How to test and mock react-native-safe-area module correctly using Jest?

Viewed 304

I am learning testing, so I am facing basic difficulty to create a test for it... Not sure if it's because the library is async or maybe because there is a query-call when the component is initialized. Maybe someone can help me ?

This is my test file

import 'react-native';
import React from 'react';
import {Welcome} from '../src/scenes'

import renderer, { act, create } from 'react-test-renderer';

// Is this the correct way ?
jest.mock('react-native-safe-area', () => ({
safeAreaInsets: {
    top:0,
    bottom:0
}
}));
describe('Welcome Page', () =>{
it('must invoke signUp', () =>{
    const component = create(<Welcome navigation={() =>{}} />);
    expect(component.toJSON()).toMatchSnapshot();
    act(() =>{
        component.root.findByProps({testID: 'signUp'}).props.onClick();
    })
});
}) 

And the Welcome is something like this...

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, Image, Animated, TouchableOpacity } from 'react-native';
import styles from './styles';
import SafeArea from 'react-native-safe-area';

function Welcome() {
  const [safeTop, setSafeTop] = useState(0)
  
SafeArea.getSafeAreaInsetsForRootView()
    .then((result) => {
        console.log(result)
        setSafeTop(result.safeAreaInsets.top)
    })
return (<View />)

} export default Welcome

0 Answers
Related