callstack / callstack/react-native-pager-view

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

Abierto
#588 0 comentarios 6 reacciones 0 asignados Ver en GitHub
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.