callstack / callstack/react-native-pager-view

Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()?

Ouverte
#588 0 commentaires 6 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
3.4k
Forks
476
Merge moyen
10 j 21 h
PR mergées (30 j)
2

Description

## Environment

```
"react-native": "0.66.4",
"react-native-pager-view": "5.4.15",
"jest": "26.6.3",
"typescript": "4.5.4"
```

## Description

I've mocked the component following this [issue](https://github.com/callstack/react-native-pager-view/issues/220). I'm receiving this warning when running jests tests on a Screen that uses the `AnimatedPagerView`:
` Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?`.

Is there something I can do about it? I tried to wrap the `AnimatedPagerView` inside `forwardRef()` but it still gives me the same warning. Is there something we can do about it? If you could point me in the right direction I can create a pull request to solve it (we tried to fix it for several days, but were not able to understand why this happens).

I also realized that there is no `testID` prop on the `PagerView` component. Is there a reason for that?

Thank you.

## Reproducible Demo

component.tsx

```
const pagerViewRef = useRef(null);

(
[
{
nativeEvent: {
offset: scrollOffsetAnimatedValue,
position: positionAnimatedValue,
},
},
],
{
useNativeDriver: true,
listener: onPageScroll,
},
)}
style={styles.pagerView}
initialPage={0}
ref={pagerViewRef}
>
...

```

test.spec.tsx
```
const MockRealComponent = jest.requireActual("react-native-pager-view");
const MockRealComponentDefault = MockRealComponent.default;

const mockPagerView = class PagerView extends React.Component {
index = 0;

setPage = (selectedPage: number) => {
this.index = selectedPage;
};

render() {
const { children } = this.props;
return {children};
}
};

jest.mock("react-native-pager-view", () => {
return mockPagerView;
});

jest.mock("react-native", () => {
const rn = jest.requireActual("react-native");
const spy = jest.spyOn(rn.Animated, "createAnimatedComponent");
spy.mockImplementation(() =>
jest.fn(props => {
const { children } = props;
return (

{children}

);
}),
);
return rn;
});
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Reproduisez l’avertissement de test.spec.tsx avec l’utilisation de AnimatedPagerView présentée dans component.tsx. Commencez par lire le composant mocké react-native-pager-view et l’implémentation mockée de Animated.createAnimatedComponent, puis suivez la manière dont le ref est transmis. Le travail est terminé lorsque l’avertissement de Jest est résolu et que la question signalée concernant testID a fait l’objet d’une documentation ou d’une implémentation.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
mobile, testing
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.