Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

useWindowSize hook triggers failure in unit test

Abierto
  • ¿Algo no está bien?
#2,618 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend, testing

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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;
Lenguaje dominante
TypeScript
Estrellas
44k
Forks
3.3k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de streamich/react-use

Todos los issues de streamich/react-use

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.