packages/hooks/useCombinedRefs.test.ts

   1 import { createElement, useEffect, useRef } from 'react';
   2
   3 import { render } from '@testing-library/react';
   4
   5 import useCombinedRefs from './useCombinedRefs';
   6
   7 describe('useCombinedRefs', () => {
   8     it('should correctly combine refs into one ref', async () => {
   9         const cbRef = jest.fn();
  10         const refs: { a: null | HTMLDivElement; b: null | HTMLDivElement } = { a: null, b: null };
  11
  12         const Test = () => {
  13             const refA = useRef<HTMLDivElement>(null);
  14             const refB = useRef<HTMLDivElement>(null);
  15             const combinedRef = useCombinedRefs(refA, refB, cbRef, undefined);
  16             useEffect(() => {
  17                 refs.a = refA.current;
  18                 refs.b = refB.current;
  19                 return () => {
  20                     refs.a = refA.current;
  21                     refs.b = refB.current;
  22                 };
  23             });
  24             return createElement('div', { ref: combinedRef, 'data-testid': 'div' });
  25         };
  26
  27         const { getByTestId, rerender } = render(createElement(Test));
  28
  29         const div = getByTestId('div');
  30
  31         expect(refs.a).toBe(div);
  32         expect(refs.b).toBe(div);
  33         expect(cbRef).toHaveBeenCalledWith(div);
  34
  35         rerender(createElement('div'));
  36
  37         expect(cbRef).toHaveBeenCalledWith(null);
  38         expect(refs.a).toBe(null);
  39         expect(refs.b).toBe(null);
  40     });
  41 });