renderHook Server

[childrentime]

What is your question:

How can I migrate this code from @testing-library/react-hooks to @testing-library/react to use react18 and use the ssr environment?

old code

import { renderHook as renderHookSSR } from '@testing-library/react-hooks/server';

 it('should ', () => {
    const { result, hydrate } = renderHookSSR(() => true);
    expect(result).toBe(true);
    hydrate();
    expect(result.current).toBe(true);
  });

[joshuaellis]

Sorry, did you mean to create this issue?

[childrentime]

Sorry, missing some words.
how can i migratie example used in ssr environment with @testing-library/react?

[joshuaellis]

This question is better suited for @testing-library/react, i'll move the issue.

[chambo-e]

Hello 👋
Tiny up on this conversation :)

[faessler]

I faced almost the same problem as OP and wanted to share my solution here in case someone else stumbles over this issue.

First I extracted the code I needed from @testing-library/react-hooks/server and updated it to be compatible with react@18 (hydrateRoot). I also skipped a lot of code I didn't need for my case, so you might need to extend my renderHookServer function to match your specific case.

import type { ReactNode } from 'react';
import { hydrateRoot } from 'react-dom/client';
import { renderToString } from 'react-dom/server';
import { act } from 'react-dom/test-utils';

export const renderHookServer = <Hook extends () => any>(
    useHook: Hook,
    {
        wrapper: Wrapper,
    }: {
        wrapper?: ({ children }: { children: ReactNode }) => JSX.Element;
    } = {}
): { result: { current: ReturnType<Hook> }; hydrate: () => void } => {
    // Store hook return value
    const results: Array<ReturnType<Hook>> = [];
    const result = {
        get current() {
            return results.slice(-1)[0];
        },
    };
    const setValue = (value: ReturnType<Hook>) => {
        results.push(value);
    };

    const Component = ({ useHook }: { useHook: Hook }) => {
        setValue(useHook());
        return null;
    };
    const component = Wrapper ? (
        <Wrapper>
            <Component useHook={useHook} />
        </Wrapper>
    ) : (
        <Component useHook={useHook} />
    );

    // Render hook on server
    const serverOutput = renderToString(component);

    // Render hook on client
    const hydrate = () => {
        const root = document.createElement('div');
        root.innerHTML = serverOutput;
        act(() => {
            hydrateRoot(root, component);
        });
    };

    return {
        result: result,
        hydrate: hydrate,
    };
};

I also had to add this to jest setupFiles:

import { TextEncoder } from 'util';
global.TextEncoder = TextEncoder;

Finally I was able to use it like this:

import { renderHookServer } from '../../testing/renderHookServer';
import { useHasMounted } from '../useHasMounted';

describe('useHasMounted', () => {
    it('returns false first and then true after hydration', () => {
        const { result, hydrate } = renderHookServer(useHasMounted);
        expect(result.current).toBe(false);
        hydrate();
        expect(result.current).toBe(true);
    });
});

[xobotyi]

It literally freaks me out that so called "merge"of libraries cut out half of functionality and in case you need to test hooks agains SSR environment - "screw you - go make your own testing library for that, you're not welcome here".

[slorber]

Same here: I was looking to upgrade Docusaurus to React 18 and couldn't find a simple official solution to migrate this test:

import React from 'react';
import {renderHook} from '@testing-library/react-hooks/server';
import {BrowserContextProvider} from '../browserContext';
import useIsBrowser from '../exports/useIsBrowser';

describe('BrowserContextProvider', () => {
  const {result, hydrate} = renderHook(() => useIsBrowser(), {
    wrapper: ({children}) => (
      <BrowserContextProvider>{children}</BrowserContextProvider>
    ),
  });
  it('has value false on first render', () => {
    expect(result.current).toBe(false);
  });
  it('has value true on hydration', () => {
    hydrate();
    expect(result.current).toBe(true);
  });
});

The docs say:

hydrate: If hydrate is set to true, then it will render with ReactDOM.hydrate. This may be useful if you are using server-side rendering and use ReactDOM.hydrate to mount your components.

https://testing-library.com/docs/react-testing-library/api#hydrate

It is unclear to me how to use this option and how it "may be useful". Who has ever used it in practice and how? An example would be very welcome

[juliencrn]

Same for usehooks-ts, how to migrate that

import { renderHook as renderHookCsr } from '@testing-library/react-hooks/dom'
import { renderHook as renderHookSsr } from '@testing-library/react-hooks/server'

import { useIsClient } from './useIsClient'

describe('useIsClient()', () => {
  it('should be false when rendering on the server', (): void => {
    const { result } = renderHookSsr(() => useIsClient())
    expect(result.current).toBe(false)
  })

  it('should be true when after hydration', (): void => {
    const { result, hydrate } = renderHookSsr(() => useIsClient())
    hydrate()
    expect(result.current).toBe(true)
  })

  it('should be true when rendering on the client', (): void => {
    const { result } = renderHookCsr(() => useIsClient())
    expect(result.current).toBe(true)
  })
})

[childrentime]

@eps1lon hello, can you have a notice on this. I find the render option has {hydrate: true}, but it don't use renderToString like the old behavior, it is directly using hydrateRoot to the test component. So we can't get the value by renderToString in server anymore.

[eps1lon]

Should result contain the earliest possible result or the result after all the data has streamed in?

[childrentime]

@eps1lon I think it is the earliest possible reuslt, which means the value when react render in server return, should not changed by effects

[childrentime]

There is something important in react, like we should return the same value in server and client at the first render, so there must have a way to check it