useWindowSize hook triggers failure in unit test
还没有人认领这个 Issue。
评估
- 难度
- 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 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
streamich/react-use 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
-
Add Generic Fn for useDebounce可能已有人在做 @itsmejay80 于 194 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 68/100
-
难度 2/5 1-3 小时 新手友好度 64/100
-
useVideo.story.tsx - sampleVideo can not be loaded可能重新可做 关联的 PR 已关闭且未合并。 未关闭
难度 1/5 1 小时以内 新手友好度 62/100
-
useSlider: event callbacks are not updated可能已有人在做 @erykpiast 于 1841 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 62/100
查看 streamich/react-use 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 66/100
db-ux-design-system/core-web#8613 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
维护者通常 1 天内回复
-
bug:new
难度 1/5 1 小时以内 新手友好度 78/100
callstackincubator/simlock#934 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 68/100
gchq/LD-Explorer#286 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复