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

feat(renderHook): allow passing of all render options to renderHook #1118

Merged
merged 2 commits into from Sep 4, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 26 additions & 0 deletions src/__tests__/renderHook.js
Expand Up @@ -60,3 +60,29 @@ test('allows wrapper components', async () => {

expect(result.current).toEqual('provided')
})

test('legacyRoot uses legacy ReactDOM.render', () => {
jest.spyOn(console, 'error').mockImplementation(() => {})

const Context = React.createContext('default')
function Wrapper({children}) {
return <Context.Provider value="provided">{children}</Context.Provider>
}
const {result} = renderHook(
() => {
return React.useContext(Context)
},
{
wrapper: Wrapper,
legacyRoot: true,
},
)

expect(result.current).toEqual('provided')

expect(console.error).toHaveBeenCalledTimes(1)
expect(console.error).toHaveBeenNthCalledWith(
1,
"Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
)
})
4 changes: 2 additions & 2 deletions src/pure.js
Expand Up @@ -219,7 +219,7 @@ function cleanup() {
}

function renderHook(renderCallback, options = {}) {
const {initialProps, wrapper} = options
const {initialProps, ...renderOptions} = options
const result = React.createRef()

function TestComponent({renderCallbackProps}) {
Expand All @@ -234,7 +234,7 @@ function renderHook(renderCallback, options = {}) {

const {rerender: baseRerender, unmount} = render(
<TestComponent renderCallbackProps={initialProps} />,
{wrapper},
renderOptions,
)

function rerender(rerenderCallbackProps) {
Expand Down
24 changes: 14 additions & 10 deletions types/index.d.ts
Expand Up @@ -120,28 +120,32 @@ export interface RenderHookResult<Result, Props> {
unmount: () => void
}

export interface RenderHookOptions<Props> {
export interface RenderHookOptions<
Props,
Q extends Queries = typeof queries,
Container extends Element | DocumentFragment = HTMLElement,
BaseElement extends Element | DocumentFragment = Container,
> extends RenderOptions<Q, Container, BaseElement> {
/**
* The argument passed to the renderHook callback. Can be useful if you plan
* to use the rerender utility to change the values passed to your hook.
*/
initialProps?: Props
/**
* Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
* reusable custom render functions for common data providers. See setup for examples.
*
* @see https://testing-library.com/docs/react-testing-library/api/#wrapper
*/
wrapper?: React.JSXElementConstructor<{children: React.ReactElement}>
}

/**
* Allows you to render a hook within a test React component without having to
* create that component yourself.
*/
export function renderHook<Result, Props>(
export function renderHook<
Result,
Props,
Q extends Queries = typeof queries,
Container extends Element | DocumentFragment = HTMLElement,
BaseElement extends Element | DocumentFragment = Container,
>(
render: (initialProps: Props) => Result,
options?: RenderHookOptions<Props>,
options?: RenderHookOptions<Props, Q, Container, BaseElement>,
): RenderHookResult<Result, Props>

/**
Expand Down