testing-library / testing-library/react-testing-library

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

Open
#1,325 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs more information
Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Description

  • @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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start from the provided renderHook reproduction using the wrapper option and run it with the listed React, Jest, and @testing-library/react versions. Compare the wrapper and hook invocation results with the expectations in the three tests; done means the wrapper behavior matches those assertions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.