No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.

Hello, I encountered this error No safe area value available. Make sure you are rendering <SafeAreaProvider> at the top of your app. when running tests in my react native application.

Of course, my application is wrapped by <SafeAreaProvider initialMetrics={initialWindowMetrics}>

Here is my test file

import React from "react"; import { render } from "@testing-library/react-native"; import Welcome from "./welcome";

test("renders correctly", () => { const { getByText } = render(); expect(getByText("Test")).toBeTruthy(); });

My setup jest file

import "../src/unistyles/unistyles"; import "react-native-gesture-handler/jestSetup"; import "@testing-library/react-native/extend-expect"; import mockAsyncStorage from "@react-native-async-storage/async-storage/jest/async-storage-mock";

import { jest } from "@jest/globals";

jest.mock( "@react-native-async-storage/async-storage", () => mockAsyncStorage ); jest.mock("react-native/Libraries/EventEmitter/NativeEventEmitter");

jest.mock("redux-persist", () => { const real = jest.requireActual("redux-persist"); return { ...real, persistReducer: jest .fn() .mockImplementation((config, reducers) => reducers), }; });

jest.mock("react-native-reanimated", () => { const Reanimated = require("react-native-reanimated/mock");

Reanimated.default.call = () => {};

return Reanimated; });

// As of react-native@0.64.X file has moved jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

I'm using expo ~51.0.16 and react-native-safe-area-context 4.10.1 And if you want my package json

{ "name": "testapp", "version": "1.0.0", "main": "index.js", "scripts": { "start": "expo start", "start:dev-client": "expo start --dev-client", "android": "npx expo run:android", "android:eas:development": "eas build --profile development --platform android", "ios": "npx expo run:ios", "ios:eas:development": "eas build --profile development --platform ios", "ios:eas:device": "eas device:create", "prebuild": "yarn expo prebuild --clean", "format": "prettier --write ./src/*/.{ts,tsx}", "test": "jest --setupFilesAfterEnv ./jest/setup.js --watchAll", "coverage": "yarn test -- --coverage", "adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:3000 tcp:3000 && adb reverse tcp:9001 tcp:9001 && adb reverse tcp:8081 tcp:8081" }, "prettier": "@betsquad/tools/prettier.config.js", "jest": { "preset": "jest-expo", "verbose": true, "transformIgnorePatterns": [ "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.|@expo-google-fonts/.|react-navigation|@react-navigation/.|@unimodules/.|unimodules|sentry-expo|native-base|react-native-svg)" ], "testPathIgnorePatterns": [ "/node_modules/", "/e2e" ], "setupFilesAfterEnv": [ "./jest/setup.js" ] }, "dependencies": { "@betsquad/tools": "", "@betsquad/utils": "", "@dev-plugins/react-query": "^0.0.6", "@expo-google-fonts/roboto": "^0.2.3", "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/bottom-tabs": "^7.0.0-rc.5", "@react-navigation/devtools": "^7.0.0-rc.1", "@react-navigation/native": "^7.0.0-rc.2", "@react-navigation/native-stack": "^7.0.0-rc.3", "@reduxjs/toolkit": "^2.2.5", "@shopify/flash-list": "1.6.4", "@shopify/react-native-skia": "^1.3.7", "expo": "~51.0.16", "expo-blur": "~13.0.2", "expo-build-properties": "~0.12.3", "expo-dev-client": "~4.0.19", "expo-font": "~12.0.7", "expo-image": "~1.12.12", "expo-linear-gradient": "~13.0.2", "expo-localization": "~15.0.3", "expo-splash-screen": "~0.27.5", "expo-status-bar": "~1.12.1", "firebase": "^10.12.2", "i18n-js": "^4.4.3", "lucide-react-native": "^0.407.0", "react": "18.2.0", "react-native": "0.74.2", "react-native-gesture-handler": "~2.16.1", "react-native-pager-view": "6.3.0", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-svg": "^15.3.0", "react-native-unistyles": "^2.8.1", "react-redux": "^9.1.2", "react-test-renderer": "^18.3.1", "redux": "^5.0.1", "redux-devtools-expo-dev-plugin": "^0.2.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@jest/globals": "^29.7.0", "@testing-library/jest-native": "^5.4.3", "@testing-library/react-native": "^12.5.1", "@types/i18n-js": "^3.8.9", "@types/jest": "^29.5.12", "@types/react": "~18.2.45", "eslint-plugin-testing-library": "^6.2.2", "jest": "^29.4.0", "jest-expo": "~51.0.3", "prettier": "^3.3.2", "typescript": "5.5.2" }, "private": true }

Thanks!

th3rdwave / react-native-safe-area-context

No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app. #512