RN(ReactNative) ThemeProvider Jest 적용법

현상

테마 적용하겠다고 react native elements 를 설치해서 적용했더니

테스트가 전부 실패

 

원인

단위 테스트 할 경우에 ThemeProvider 가 적용되지 않아서 입니다

 

해결방법

jest 테스트 를 진행할 때 ThemeProvider 로 감싸 주도록 util 을 만들어서 사용합니다

//src > utils > test-utils.js

import {render} from '@testing-library/react-native';
import {
  ThemeProvider,
  createTheme,
  lightColors,
  darkColors,
} from '@rneui/themed';

const AllTheProviders = ({children}) => {
  const theme = createTheme({
    ...lightColors,
    ...darkColors,
  });
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

const customRender = (ui, options) =>
  render(ui, {wrapper: AllTheProviders, ...options});

export * from '@testing-library/react-native';
export {customRender as render};

 

ReactNative Testing Library 를 바로 이용하지 않고 test-utils 를 만들어서

themeprovider 로 무조건 감싸게 만들고 

테스트 에서 test-utils 를 사용합니다

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

...생략...