callstack / callstack/react-native-pager-view
Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()?
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
## 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;
});
```
Guía de contribución
Línea de trabajo
Reproduce la advertencia de test.spec.tsx con el uso de AnimatedPagerView mostrado en component.tsx. Empieza leyendo el componente simulado de react-native-pager-view y la implementación simulada de Animated.createAnimatedComponent; después, sigue cómo se pasa el ref. El trabajo estará terminado cuando se resuelva la advertencia de Jest y la cuestión reportada sobre testID tenga un resultado documentado o implementado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- mobile, testing
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100