Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange behavor when using renderHook with wrapper option #1325

Open
zero88 opened this issue May 9, 2024 · 1 comment
Open

Strange behavor when using renderHook with wrapper option #1325

zero88 opened this issue May 9, 2024 · 1 comment

Comments

@zero88
Copy link

zero88 commented May 9, 2024

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

@eps1lon
Copy link
Member

eps1lon commented May 13, 2024

Please provide a cloneable repro.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants