callstack / callstack/react-native-pager-view
Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()?
- 主要言語
- TypeScript
- スター
- 3.4k
- フォーク
- 476
- 平均マージ
- 10日 21時間
- マージ済み PR(30日)
- 2
説明
## 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;
});
```
コントリビューションガイド
調査の方向性
component.tsx に示されている AnimatedPagerView の使用方法で、test.spec.tsx の警告を再現してください。まず、モックされた react-native-pager-view コンポーネントとモックされた Animated.createAnimatedComponent の実装を読み、次に ref がどのように渡されているかを追跡してください。Jest の警告が解決され、報告された testID に関する疑問について文書化または実装による結果が出れば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile, testing
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100