11import { describe , expect , it , jest } from '@jest/globals' ;
2+ import { act , render , screen } from '@testing-library/react-native' ;
23import * as React from 'react' ;
34import { View } from 'react-native' ;
4- import * as ReactTestRenderer from 'react-test-renderer' ;
5- import { NativeSafeAreaProvider } from '../NativeSafeAreaProvider' ;
65import type { Metrics } from '../SafeArea.types' ;
76import {
87 SafeAreaProvider ,
@@ -40,66 +39,64 @@ const PrintInsetsTestView = () => {
4039
4140describe ( 'SafeAreaContext' , ( ) => {
4241 it ( 'renders' , ( ) => {
43- const component = ReactTestRenderer . create ( < SafeAreaProvider /> ) ;
44- expect ( component ) . toMatchSnapshot ( ) ;
42+ const { toJSON } = render ( < SafeAreaProvider /> ) ;
43+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
4544 } ) ;
4645
4746 it ( 'does not render child until inset values are received' , ( ) => {
48- const component = ReactTestRenderer . create (
47+ const { toJSON } = render (
4948 < SafeAreaProvider >
5049 < PrintInsetsTestView />
5150 </ SafeAreaProvider > ,
5251 ) ;
53- expect ( component ) . toMatchSnapshot ( ) ;
52+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
5453 } ) ;
5554
56- it ( 'renders child when inset values are received' , ( ) => {
57- const component = ReactTestRenderer . create (
58- < SafeAreaProvider >
55+ it ( 'renders child when inset values are received' , async ( ) => {
56+ const { toJSON } = render (
57+ < SafeAreaProvider testID = "safe-area-provider" >
5958 < PrintInsetsTestView />
6059 </ SafeAreaProvider > ,
6160 ) ;
62- expect ( component ) . toMatchSnapshot ( ) ;
63- const { onInsetsChange } = component . root . findByType (
64- NativeSafeAreaProvider ,
65- ) . props ;
66- ReactTestRenderer . act ( ( ) => {
67- onInsetsChange ( {
61+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
62+ const element = await screen . findByTestId ( 'safe-area-provider' ) ;
63+ act ( ( ) => {
64+ element . props . onInsetsChange ( {
6865 nativeEvent : TEST_METRICS_1 ,
6966 } ) ;
7067 } ) ;
71- expect ( component ) . toMatchSnapshot ( ) ;
68+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
7269 } ) ;
7370
7471 it ( 'supports setting initial insets' , ( ) => {
75- const component = ReactTestRenderer . create (
72+ const { toJSON } = render (
7673 < SafeAreaProvider initialMetrics = { TEST_METRICS_1 } >
7774 < PrintInsetsTestView />
7875 </ SafeAreaProvider > ,
7976 ) ;
80- expect ( component ) . toMatchSnapshot ( ) ;
77+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
8178 } ) ;
8279
8380 it ( 'uses parent insets when available' , ( ) => {
84- const component = ReactTestRenderer . create (
81+ const { toJSON } = render (
8582 < SafeAreaProvider initialMetrics = { TEST_METRICS_1 } >
8683 < SafeAreaProvider >
8784 < PrintInsetsTestView />
8885 </ SafeAreaProvider >
8986 </ SafeAreaProvider > ,
9087 ) ;
91- expect ( component ) . toMatchSnapshot ( ) ;
88+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
9289 } ) ;
9390
9491 it ( 'uses inner insets' , ( ) => {
95- const component = ReactTestRenderer . create (
92+ const { toJSON } = render (
9693 < SafeAreaProvider initialMetrics = { TEST_METRICS_1 } >
9794 < SafeAreaProvider initialMetrics = { TEST_METRICS_2 } >
9895 < PrintInsetsTestView />
9996 </ SafeAreaProvider >
10097 </ SafeAreaProvider > ,
10198 ) ;
102- expect ( component ) . toMatchSnapshot ( ) ;
99+ expect ( toJSON ( ) ) . toMatchSnapshot ( ) ;
103100 } ) ;
104101
105102 it ( 'throws when no provider is rendered' , ( ) => {
@@ -112,7 +109,7 @@ describe('SafeAreaContext', () => {
112109 }
113110 } ) ;
114111 expect ( ( ) => {
115- ReactTestRenderer . create ( < PrintInsetsTestView /> ) ;
112+ render ( < PrintInsetsTestView /> ) ;
116113 } ) . toThrow (
117114 'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.' ,
118115 ) ;
0 commit comments