useWindowSize hook triggers failure in unit test #2618
Description
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;