GeekyAnts / GeekyAnts/NativeBase

After Upgrading NativeBase Unit Tests Fail to Render

Open
#5,536 1 comment 0 reactions 0 assignees View on GitHub
bug triage v3
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:

Screenshot 2022-11-06 at 9 48 04 PM

Screenshot 2022-11-06 at 9 49 17 PM

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.