React SSR hook testing

renderHookServer.ts

import { createElement } from 'react'
import { renderToString } from 'react-dom/server'

export default function renderHookServer(
  hookInit: Function
): // eslint-disable-next-line @typescript-eslint/no-explicit-any
any {
  let hookOutput = undefined

  function HookWrapper() {
    hookOutput = hookInit()

    return createElement('div')
  }

  renderToString(createElement(HookWrapper))

  return hookOutput
}

server.test.ts

/**
 * @jest-environment node
 */

import renderHookServer from '../../utils/renderHookServer'
import useMediaQuery from '.'

describe('useMediaQuery', () => {
  describe('server', () => {
    test('uses a default fallback', () => {
      const result = renderHookServer(() => useMediaQuery('(min-width: 300px)'))

      expect(result).toBe(false)
    })

    test('uses a specific fallback', () => {
      const result = renderHookServer(() =>
        useMediaQuery('(min-width: 300px)', true)
      )

      expect(result).toBe(true)
    })
  })
})

useMediaQuery.ts

import { useEffect, useState } from 'react'

export default function useMediaQuery(
  query: string,
  fallback: boolean = false
): boolean {
  const [state, setState] = useState(fallback)

  // Listen for changes
  useEffect(() => {
    const mediaQuery = window.matchMedia(query)
    const handleChange = ({ matches }: MediaQueryListEvent) => {
      setState(matches)
    }

    mediaQuery.addListener(handleChange)

    return () => {
      mediaQuery.removeListener(handleChange)
    }
  }, [query])

  return state
}

Jest + Node + React SSR + React hooks

Looks totally legit 👍 May be a cool addition to react-hooks-testing-library

Thanks again @kentcdodds ☺️