renderHook Server - Githubissues

childrentime commented 2 years ago

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 commented 2 years ago

Sorry, did you mean to create this issue?

childrentime commented 2 years ago

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

joshuaellis commented 2 years ago

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

chambo-e commented 1 year ago

Hello 👋 Tiny up on this conversation :)

faessler commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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