RN(ReactNative) SafeAreaProvider Jest 적용법

현상

SafeAreaProvider 를 적용했더니 Jest 의 테스트가 전부 실패

getByText 같은 간단한 것도 못 가져온다고 실패

 

원인

SafeAreaProvider 를 jest 로 테스트 할 경우에 못 읽어옴

import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
...생략...


  return (
    <>
      <SafeAreaProvider>
        <SafeAreaView>
          <ThemeProvider theme={theme}>
            <HomeScreen />
          </ThemeProvider>
        </SafeAreaView>
      </SafeAreaProvider>
    </>
  );
  
  ...

 

해결방법

mocking 하면 됩니다.

공식문서에서는 jest 설정파일에 아래 두줄 추가 하라고 했는데

저는 해결이 안되어서

import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);

 

 

다른 방법으로 해결했습니다. app-test.js 에서 

jest.mock 을 추가했더니 테스트 잘되네요

import 'react-native';
import React from 'react';
import {render} from '../src/utils/test-utils';

import App from '../src/App';

jest.mock('react-native-safe-area-context', () => {
  const inset = {top: 0, right: 0, bottom: 0, left: 0};
  return {
    ...jest.requireActual('react-native-safe-area-context'),
    SafeAreaProvider: jest.fn(({children}) => children),
    SafeAreaConsumer: jest.fn(({children}) => children(inset)),
    useSafeAreaInsets: jest.fn(() => inset),
    useSafeAreaFrame: jest.fn(() => ({x: 0, y: 0, width: 390, height: 844})),
  };
});


...생략...


describe('App render', () => {
  beforeEach(() => {
    props = {};
    wrapper = render(<App {...props} />);
  });

  it('should render title Todo TDD', () => {
    const element = wrapper.getByText('Todo TDD');
    expect(element).toBeTruthy();
  });