Jest TypeError: Cannot read properties of undefined (reading 'width')

### Description

Testing Snapshot NativeBase components failed

### CodeSandbox/Snack link

https://github.com/toninlopes/NativeBaseSample

### Steps to reproduce

1. On terminal, run ```yarn test```

### NativeBase Version

3.4.28

### Platform

- [ ] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

I have set up a standard React Native + Native Base project. See the package.json.

```
{
"name": "NativeBaseSample",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"native-base": "^3.4.28",
"react": "18.3.1",
"react-native": "0.76.0",
"react-native-safe-area-context": "3.3.2",
"react-native-svg": "12.1.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.0-alpha.2",
"@react-native-community/cli-platform-android": "15.0.0-alpha.2",
"@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
"@react-native/babel-preset": "0.76.0",
"@react-native/eslint-config": "0.76.0",
"@react-native/metro-config": "0.76.0",
"@react-native/typescript-config": "0.76.0",
"@testing-library/react-native": "^12.8.0",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}
```

Here is a simple snapshot test with @testing-library/react-native and react-test-renderer.

```
import 'react-native';
import React from 'react';
import {describe, it, expect} from '@jest/globals';
import {render, screen} from '@testing-library/react-native';
import renderer from 'react-test-renderer';
import { Button } from 'native-base';
import { Text } from 'react-native';
import { NativeBaseProvider } from 'native-base';
import { Metrics, SafeAreaProvider } from 'react-native-safe-area-context';

const MOCK_INITIAL_METRICS: Metrics = {
frame: { width: 320, height: 640, x: 0, y: 0 },
insets: { left: 0, right: 0, bottom: 0, top: 0 },
};

const Wrapper = ({children}: {children: React.ReactNode}) =>


{children}

;

describe('Snapshot Testing', () => {

it('Render NativeBase Button with @testing-library/react-native', () => {
render(

Test

);
expect(screen.toJSON()).toMatchSnapshot();
});

it('Render NativeBase Button with react-test-renderer', () => {
const component = renderer.create(

Test

).toJSON();
expect(component).toMatchSnapshot();
});

it('Render React Native Text with @testing-library/react-native', () => {
render(
Test
);
expect(screen.toJSON()).toMatchSnapshot();
});

it('Render React Native Text with react-test-renderer', () => {
const component = renderer.create(
Test
).toJSON();
expect(component).toMatchSnapshot();
});

});
```

Tests 1 and 2 use the ```` as wrapper and both libraries gets the same error.

```
console.error
The above error occurred in the component:

at debug (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/utils/styled.js:18:5)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/components/primitives/Pressable/Pressable.js:72:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/components/primitives/Button/Button.js:38:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/@react-aria/ssr/dist/SSRProvider.main.js:75:154)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/components/composites/Toast/Toast.js:139:3)
at useState (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/@react-native-aria/overlays/lib/commonjs/Portal.js:17:44)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/core/hybrid-overlay/HybridProvider.js:23:3)
at disableCSSMediaQueries (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/utils/useResponsiveQuery/ResponsiveQueryProvider.js:21:14)
at RNCSafeAreaProvider
at Component (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native-safe-area-context/lib/commonjs/SafeAreaContext.js:35:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/utils/createContext.js:17:7)
at colorModeManager (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/core/NativeBaseProvider.js:56:5)
at RNCSafeAreaProvider
at Component (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native-safe-area-context/lib/commonjs/SafeAreaContext.js:35:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/__tests__/App.test.tsx:16:19)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

25 |
26 | it('Render NativeBase Button with @testing-library/react-native', () => {
> 27 | render(
| ^
28 |
29 | Test
30 |

at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8678:23)
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8711:5)
at call (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5175:12)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5196:9)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13271:13)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14369:9)
at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14355:7)
at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14340:3)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16101:5)
at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15972:5)
at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15493:3)
at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at callback (node_modules/react/cjs/react.development.js:2667:24)
at flushActQueue (node_modules/react/cjs/react.development.js:2521:11)
at actImplementation (node_modules/@testing-library/react-native/build/act.js:31:25)
at renderWithAct (node_modules/@testing-library/react-native/build/render-act.js:14:24)
at renderInternal (node_modules/@testing-library/react-native/build/render.js:54:48)
at renderInternal (node_modules/@testing-library/react-native/build/render.js:29:10)
at Object. (__tests__/App.test.tsx:27:11)

console.error
The above error occurred in the component:

at debug (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/utils/styled.js:18:5)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/components/primitives/Pressable/Pressable.js:72:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/components/primitives/Button/Button.js:38:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/@react-aria/ssr/dist/SSRProvider.main.js:75:154)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/components/composites/Toast/Toast.js:139:3)
at useState (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/@react-native-aria/overlays/lib/commonjs/Portal.js:17:44)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/core/hybrid-overlay/HybridProvider.js:23:3)
at disableCSSMediaQueries (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/utils/useResponsiveQuery/ResponsiveQueryProvider.js:21:14)
at RNCSafeAreaProvider
at Component (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native-safe-area-context/lib/commonjs/SafeAreaContext.js:35:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/utils/createContext.js:17:7)
at colorModeManager (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/native-base/lib/commonjs/core/NativeBaseProvider.js:56:5)
at RNCSafeAreaProvider
at Component (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/node_modules/react-native-safe-area-context/lib/commonjs/SafeAreaContext.js:35:3)
at children (/Users/aclopesjr/git_repos/ReactNative/NativeBaseSample/__tests__/App.test.tsx:16:19)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

34 |
35 | it('Render NativeBase Button with react-test-renderer', () => {
> 36 | const component = renderer.create(
| ^
37 |
38 | Test
39 |

at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8678:23)
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8711:5)
at call (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5175:12)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5196:9)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13271:13)
at commitLayoutEffectOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14369:9)
at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14355:7)
at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14340:3)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16101:5)
at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15972:5)
at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15493:3)
at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2576:5)
at flushSyncCallbacksOnlyInLegacyMode (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14949:7)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17809:5)
at Object.updateContainer [as create] (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18549:3)
at Object.create (__tests__/App.test.tsx:36:32)

FAIL __tests__/App.test.tsx
Snapshot Testing
✕ Render NativeBase Button with @testing-library/react-native (283 ms)
✕ Render NativeBase Button with react-test-renderer (15 ms)
✓ Render React Native Text with @testing-library/react-native (3 ms)
✓ Render React Native Text with react-test-renderer

● Snapshot Testing › Render NativeBase Button with @testing-library/react-native

TypeError: Cannot read properties of undefined (reading 'width')

25 |
26 | it('Render NativeBase Button with @testing-library/react-native', () => {
> 27 | render(
| ^
28 |
29 | Test
30 |

at useResponsiveQuery (node_modules/native-base/lib/commonjs/utils/useResponsiveQuery/useResponsiveQuery.js:19:62)
at useStyledSystemPropsResolver (node_modules/native-base/lib/commonjs/hooks/useStyledSystemPropsResolver.js:38:49)
at node_modules/native-base/lib/commonjs/utils/styled.js:21:71
at Component (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5608:18)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9169:20)
at updateForwardRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11400:16)
at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15850:12)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15784:5)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15756:7)
at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15461:20)
at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at callback (node_modules/react/cjs/react.development.js:2667:24)
at flushActQueue (node_modules/react/cjs/react.development.js:2521:11)
at actImplementation (node_modules/@testing-library/react-native/build/act.js:31:25)
at renderWithAct (node_modules/@testing-library/react-native/build/render-act.js:14:24)
at renderInternal (node_modules/@testing-library/react-native/build/render.js:54:48)
at renderInternal (node_modules/@testing-library/react-native/build/render.js:29:10)
at Object. (__tests__/App.test.tsx:27:11)

● Snapshot Testing › Render NativeBase Button with react-test-renderer

TypeError: Cannot read properties of undefined (reading 'width')

34 |
35 | it('Render NativeBase Button with react-test-renderer', () => {
> 36 | const component = renderer.create(
| ^
37 |
38 | Test
39 |

at useResponsiveQuery (node_modules/native-base/lib/commonjs/utils/useResponsiveQuery/useResponsiveQuery.js:19:62)
at useStyledSystemPropsResolver (node_modules/native-base/lib/commonjs/hooks/useStyledSystemPropsResolver.js:38:49)
at node_modules/native-base/lib/commonjs/utils/styled.js:21:71
at Component (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5608:18)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9169:20)
at updateForwardRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11400:16)
at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15850:12)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15784:5)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15756:7)
at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15461:20)
at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2576:5)
at flushSyncCallbacksOnlyInLegacyMode (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14949:7)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17809:5)
at Object.updateContainer [as create] (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18549:3)
at Object.create (__tests__/App.test.tsx:36:32)

Test Suites: 1 failed, 1 total
Tests: 2 failed, 2 passed, 4 total
Snapshots: 2 passed, 2 total
Time: 2.949 s, estimated 3 s
Ran all test suites related to changed files.
```

Run yarn test in the linked NativeBaseSample and use the failure stack to inspect __tests__/App.test.tsx, native-base/lib/commonjs/utils/styled.js, and the Button and Pressable paths shown there. Determine why the NativeBaseProvider wrapper produces the undefined width error, then verify that both snapshot tests pass without breaking the plain React Native Text tests.

Written by the indexing model from the issue text.