useWindowSize hook triggers failure in unit test
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 静か
- 技術スタック
- react, typescript
調査の方向性
Start by reproducing the unit-test failure from src/app/baremetal/page.tsx and tests/app/baremetal/page.test.tsx, then inspect the useWindowSize and useRafState paths in node_modules/react-use/lib. Done means the hook can be used in the unit test without the useRef error and the test passes.
索引モデルが issue の本文から書いたものです。
説明
What is the current behavior?
A component that uses useWindowSize works fine in the browser, but fails its basic unit-tests.
Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:
(Code is company-proprietary.)
What is the expected behavior?
Unit test should have no problem with the hook.
A little about versions:
- OS: Ubuntu Linux 24.04
- Browser (vendor and version): N/A
- React: 18.3.1
react-use: 17.6.0- Did this worked in the previous package version? First time using this package
This is the error message received:
TypeError: Cannot read properties of null (reading 'useRef')
51 |
52 | export default function HomePage() {
> 53 | const { height } = useWindowSize({ initialWidth: 1280, initialHeight: 1024 });
|
at Object.useRef (node_modules/react/cjs/react.development.js:1630:21)
at Object.useRafState [as default] (node_modules/react-use/lib/useRafState.js:7:25)
at useWindowSize (node_modules/react-use/lib/useWindowSize.js:10:35)
at HomePage (src/app/baremetal/page.tsx:53:35)
at Object.<anonymous> (__tests__/app/baremetal/page.test.tsx:25:18)
It appears that the import of react in node_modules/react-use/lib/useRafState.js is returning null. This is the content of that file:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var useUnmount_1 = tslib_1.__importDefault(require("./useUnmount"));
var useRafState = function (initialState) {
var frame = react_1.useRef(0);
var _a = react_1.useState(initialState), state = _a[0], setState = _a[1];
var setRafState = react_1.useCallback(function (value) {
cancelAnimationFrame(frame.current);
frame.current = requestAnimationFrame(function () {
setState(value);
});
}, []);
useUnmount_1.default(function () {
cancelAnimationFrame(frame.current);
});
return [state, setRafState];
};
exports.default = useRafState;
- 主要言語
- TypeScript
- スター
- 44k
- フォーク
- 3.3k
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
streamich/react-use のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
Add Generic Fn for useDebounce対応中かも @itsmejay80 が 195 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
-
useVideo.story.tsx - sampleVideo can not be loaded再び着手できるかも このイシューのプルリクエストはマージされずにクローズされました。 オープン
難易度 1/5 1時間未満 初心者へのやさしさ 62/100
-
useSlider: event callbacks are not updated対応中かも @erykpiast が 1842 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
streamich/react-use の issue をすべて見る
似ている issue
-
bug hacktoberfest help wanted
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
libredb/libredb-studio#1941 ·
メンテナーはふだん 1 日以内に返信
-
chore other
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
alastair-smith/card-games#308 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 86/100
paperclipai/paperclip#17379 ·
メンテナーはふだん 1 日以内に返信
-
[good first issue, hacktoberfest] 🏯 Hacktoberfest Task - Add new Anime Quote 626 (good-first-issue)オープンcommunity first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
難易度 1/5 1時間未満 初心者へのやさしさ 76/100
lingdojo/kana-dojo#33040 · コメント 1 件 · リアクション 5 件 ·
メンテナーはふだん 1 日以内に返信
-
bug mobile ui
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信