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

Strange behavor when using `renderHook` with `wrapper` option

Abierto
  • ¿Algo no está bien?
#1,325 1 comentario 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
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
javascript, react
Área
frontend, testing-qa

Línea de trabajo

Parte de la reproducción proporcionada de renderHook usando la opción wrapper y ejecútala con las versiones indicadas de React, Jest y @testing-library/react. Compara los resultados de la invocación de wrapper y del hook con las expectativas de las tres pruebas; se considera terminado cuando el comportamiento de wrapper coincide con esas aserciones.

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

Descripción

needs more information
  • @testing-library/react version: 14.3.1 + 15.0.7
  • Testing Framework and version:
{
  "devDependencies": {
    "@testing-library/react": "15.0.7"
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "react": "18.3.1"
  }
}
Relevant code or config:
{
  "engines": {
    "node": "20",
    "npm": "10",
    "yarn": "PLEASE USE NPM"
  }
}
What you did:
import { renderHook } from '@testing-library/react';
import React, { ReactElement } from 'react';

interface WrapperProps {
  color?: string;
  onInvoke?: jest.Mock;
  children?: any;
}

let mockWrapperFn = jest.fn();

const Wrapper = (props?: WrapperProps): ReactElement => {
  const bgColor = props?.color ?? 'black';
  const onInvoke = props?.onInvoke ?? mockWrapperFn;
  console.log(`GIVEN PROPS color: ${bgColor}`);
  onInvoke(`INSIDE WRAPPER: ${bgColor}`);
  return <div style={{ backgroundColor: bgColor }}>hello</div>;
};

const useHookTest = (onInvoke: jest.Mock) => {
  onInvoke('INSIDE HOOK');
  return 'hello-guy';
};

afterEach(() => jest.clearAllMocks());

test('not call hook with custom wrapper', () => {
  const mockHookFn = jest.fn();
  const { result } = renderHook(() => useHookTest(mockHookFn), {
    wrapper: () => Wrapper({ color: 'red', onInvoke: mockWrapperFn }),
  });

  expect(mockWrapperFn).toHaveBeenCalledTimes(1);
  expect(mockWrapperFn).toHaveBeenLastCalledWith('INSIDE WRAPPER: red');
  expect(mockHookFn).toHaveBeenCalledTimes(1);
  expect(mockHookFn).toHaveBeenLastCalledWith('INSIDE HOOK');
  expect(result.current).toBe('hello-guy');
});

test('not call hook with default wrapper', () => {
  const mockHookFn = jest.fn();
  const { result } = renderHook(() => useHookTest(mockHookFn), { wrapper: Wrapper });

  expect(mockWrapperFn).toHaveBeenCalledTimes(1);
  expect(mockWrapperFn).toHaveBeenLastCalledWith('INSIDE WRAPPER: black');
  expect(mockHookFn).toHaveBeenCalledTimes(1);
  expect(mockHookFn).toHaveBeenLastCalledWith('INSIDE HOOK');
  expect(result.current).toBe('hello-guy');
});

test('call hook without wrapper', () => {
  const mockHookFn = jest.fn();
  const { result } = renderHook(() => useHookTest(mockHookFn));

  expect(mockWrapperFn).toHaveBeenCalledTimes(0);
  expect(mockHookFn).toHaveBeenCalledTimes(1);
  expect(mockHookFn).toHaveBeenLastCalledWith('INSIDE HOOK');
  expect(result.current).toBe('hello-guy');
});
What happened:

renderHook does not render hook with wrapper option

image

Lenguaje dominante
JavaScript
Estrellas
19.7k
Forks
1.2k
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 testing-library/react-testing-library

Todos los issues de testing-library/react-testing-library

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.