@testing-library/react-hooks and jest-react-hooks-shallow co-existence

testing-library-and-jest-react-hooks-shallow-co-existence.test.js

import { renderHook } from '@testing-library/react-hooks'
import enableHooks, { withoutHooks } from 'jest-react-hooks-shallow'

// enable jest-react-hooks-shallow helper by default
enableHooks(jest)

describe('@testing-library/react-hooks renderHook and jest-react-hooks-shallow co-existence', () => {
  
  it('testing-library `renderHook` does NOT work when jest-react-hooks-shallow helper is enabled', () => {
    jest.spyOn(console, 'log');
    const { unmount, result } = renderHook(() => hook());
    expect(console.log).toHaveBeenCalledWith('mounted');
    unmount();
    expect(console.log).toHaveBeenCalledWith('unmounting');
  })

  it('testing-library `renderHook` only works when jest-react-hooks-shallow helper is disabled', () => {
    withoutHooks(() => {
      jest.spyOn(console, 'log');
      const { unmount, result } = renderHook(() => hook());
      expect(console.log).toHaveBeenCalledWith('mounted');
      unmount();
      expect(console.log).toHaveBeenCalledWith('unmounting');
    })
  })

})

function hook() {
  React.useEffect(() => {
    console.log('mounted');
    return () => console.log('unmounting');
  }, []);
}

// part of the sample code courtesy of https://javascript.plainenglish.io/testing-react-hooks-1fee0bfdbf42