Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

useWindowSize hook triggers failure in unit test

Aperta
  • Qualcosa non va?
#2,618 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend, testing

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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;
Lingua principale
TypeScript
Stelle
44k
Fork
3.3k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di streamich/react-use

Tutte le issue di streamich/react-use

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.