testing-library / testing-library/react-testing-library
Strange behavor when using `renderHook` with `wrapper` option
Open
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/reactversion: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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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