GeekyAnts / GeekyAnts/NativeBase
After Upgrading NativeBase Unit Tests Fail to Render
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
After upgrading Native Base to the latest version, Unit Tests fail to render and React is defined as being null
### CodeSandbox/Snack link
private project
### Steps to reproduce
I've added a basic setup below, by following the react-native testing library i've created a custom render function. However with the NativeBaseProvider component added I receive this error:


### NativeBase Version
3.4.17
### Platform
- [X] Android
- [ ] CRA
- [ ] Expo
- [X] iOS
- [ ] Next
### Other Platform
_No response_
### Additional Information
Utils
```jsx
import { render, RenderOptions } from '@testing-library/react-native';
import 'jest-styled-components/native';
import React from 'react';
import { theme as lightTheme } from 'src/themes/index';
import { ThemeProvider } from 'styled-components/native';
import { NativeBaseProvider } from 'native-base';
const inset = {
frame: { x: 0, y: 0, width: 0, height: 0 },
insets: { top: 0, left: 0, right: 0, bottom: 0 },
};
const WithThemeProviders: React.FC = ({ children }) => {
return (
{children}
);
};
const customRender = (
ui: React.ReactElement,
options?: RenderOptions
): ReturnType =>
render(ui, { wrapper: WithThemeProviders, ...options });
// re-export everything
export * from '@testing-library/react-native';
// override render method
export { customRender as render };
```
Badge Test
```jsx
import Bagde from '@components/atoms/Bagde';
import React from 'react';
import { render } from '__tests__/utils';
describe('[Atom] Bagde', () => {
beforeEach(() => {
jest.resetModules();
});
it('should render', () => {
const { getByTestId } = render();
const text = getByTestId('badge-text');
expect(text).toHaveTextContent('new');
});
});
```
Badge
```jsx
import React from 'react';
import { View, Text } from 'react-native';
interface Props {
value: string;
}
const Badge: React.FC = ({ value }) => {
return (
{value}
);
};
export default Badge;
```
Contributor guide
Research direction
Start with the custom render utility and the Badge test shown in the issue, then reproduce the failure with NativeBaseProvider version 3.4.17. Trace why React is null during rendering; done means the Badge test renders successfully and its text assertion passes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100