callstack / callstack/react-native-pager-view

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

オープン
#588 コメント 0 件 リアクション 6 件 担当者 0 名 GitHub で見る
主要言語
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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。