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

Aberta
  • Algo errado?
#1,325 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
frontend, testing-qa

Direção de pesquisa

Comece pela reprodução fornecida de renderHook usando a opção wrapper e execute-a com as versões listadas de React, Jest e @testing-library/react. Compare os resultados da invocação de wrapper e do hook com as expectativas nos três testes; está concluído quando o comportamento de wrapper corresponde a essas asserções.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
JavaScript
Estrelas
19.7k
Forks
1.2k
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de testing-library/react-testing-library

Todas as issues de testing-library/react-testing-library

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.