callstack / callstack/react-native-pager-view
Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()?
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 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;
});
```
Contributor guide
Assessment
This issue has not been assessed yet.