react-use/tests/useEvent.test.ts

import { renderHook } from '@testing-library/react-hooks';
import useEvent, { ListenerType1, ListenerType2 } from '../src/useEvent';

interface Props {
  name: string;
  handler: (...args: any[]) => void;
  target: ListenerType1 | ListenerType2;
  options: any;
}

const propsList1 = [
  {
    name: 'name1',
    handler: () => {},
    target: {
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
    },
    options: { a: 'opt1' },
  },
  {
    name: 'name2',
    handler: () => {},
    target: {
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
    },
    options: { a: 'opt2' },
  },
];

const propsList2 = [
  {
    ...propsList1[0],
    target: {
      on: jest.fn(),
      off: jest.fn(),
    },
  },
  {
    ...propsList1[1],
    target: {
      on: jest.fn(),
      off: jest.fn(),
    },
  },
];

it('should call addEventListener/removeEventListener on mount/unmount', () => {
  checkOnMountAndUnmount(propsList1[0], 'addEventListener', 'removeEventListener');
});

it('should call on/off on mount/unmount', () => {
  checkOnMountAndUnmount(propsList2[0], 'on', 'off');
});

it('should call addEventListener/removeEventListener on deps changes', () => {
  checkOnDepsChanges(propsList1[0], propsList1[1], 'addEventListener', 'removeEventListener');
});

it('should call on/off on deps changes', () => {
  checkOnDepsChanges(propsList2[0], propsList2[1], 'on', 'off');
});

const checkOnMountAndUnmount = (props: Props, addEventListenerName: string, removeEventListenerName: string) => {
  const { unmount } = renderHook((p: Props) => useEvent(p.name, p.handler, p.target, p.options), {
    initialProps: props,
  });
  expect(props.target[addEventListenerName]).toHaveBeenCalledTimes(1);
  expect(props.target[addEventListenerName]).toHaveBeenLastCalledWith(props.name, props.handler, props.options);
  unmount();
  expect(props.target[removeEventListenerName]).toHaveBeenCalledTimes(1);
  expect(props.target[removeEventListenerName]).toHaveBeenLastCalledWith(props.name, props.handler, props.options);
};

const checkOnDepsChanges = (
  props1: Props,
  props2: Props,
  addEventListenerName: string,
  removeEventListenerName: string
) => {
  const { rerender } = renderHook((p: Props) => useEvent(p.name, p.handler, p.target, p.options), {
    initialProps: props1,
  });
  expect(props1.target[addEventListenerName]).toHaveBeenCalledTimes(1);
  expect(props1.target[addEventListenerName]).toHaveBeenLastCalledWith(props1.name, props1.handler, props1.options);

  // deps are same as previous
  rerender({ name: props1.name, handler: props1.handler, target: props1.target, options: props1.options });
  expect(props1.target[removeEventListenerName]).not.toHaveBeenCalled();

  // name is different from previous
  rerender({ name: props2.name, handler: props1.handler, target: props1.target, options: props1.options });
  expect(props1.target[removeEventListenerName]).toHaveBeenCalledTimes(1);
  expect(props1.target[removeEventListenerName]).toHaveBeenLastCalledWith(props1.name, props1.handler, props1.options);

  // handler is different from previous
  rerender({ name: props2.name, handler: props2.handler, target: props1.target, options: props1.options });
  expect(props1.target[removeEventListenerName]).toHaveBeenCalledTimes(2);
  expect(props1.target[removeEventListenerName]).toHaveBeenLastCalledWith(props2.name, props1.handler, props1.options);

  // options contents is same as previous
  rerender({ name: props2.name, handler: props2.handler, target: props1.target, options: { a: 'opt1' } });
  expect(props1.target[removeEventListenerName]).toHaveBeenCalledTimes(2);

  // options is different from previous
  rerender({ name: props2.name, handler: props2.handler, target: props1.target, options: props2.options });
  expect(props1.target[removeEventListenerName]).toHaveBeenCalledTimes(3);
  expect(props1.target[removeEventListenerName]).toHaveBeenLastCalledWith(props2.name, props2.handler, props1.options);

  // target is different from previous
  rerender({ name: props2.name, handler: props2.handler, target: props2.target, options: props2.options });
  expect(props1.target[removeEventListenerName]).toHaveBeenCalledTimes(4);
  expect(props1.target[removeEventListenerName]).toHaveBeenLastCalledWith(props2.name, props2.handler, props2.options);

  expect(props2.target[addEventListenerName]).toHaveBeenCalledTimes(1);
  expect(props2.target[addEventListenerName]).toHaveBeenLastCalledWith(props2.name, props2.handler, props2.options);
};