callstack / callstack/react-native-pager-view
Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()?
- 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