react-native-web-internals/dist/esm/modules/useMergeRefs/__tests__/index-test.js

React Native for Web

import { cleanup, render } from "@testing-library/react";
import * as React from "react";
import { act } from "react-dom/test-utils";
import useMergeRefs from "..";
import { jsx } from "react/jsx-runtime";
describe("modules/useMergeRefs/index.js", () => {
  function TestComponent({ refs, ...rest }) {
    const mergedRef = useMergeRefs(...refs);
    return /* @__PURE__ */ jsx("div", { ref: mergedRef, ...rest });
  }
  afterEach(cleanup), test("handles no refs", () => {
    act(() => {
      render(/* @__PURE__ */ jsx(TestComponent, { refs: [] }));
    });
  }), test("merges any number of varying refs", () => {
    const callbackRef1 = jest.fn(), callbackRef2 = jest.fn(), objectRef1 = React.createRef(), objectRef2 = React.createRef(), nullRef = null;
    act(() => {
      render(
        /* @__PURE__ */ jsx(
          TestComponent,
          {
            refs: [callbackRef1, callbackRef2, objectRef1, objectRef2, nullRef]
          }
        )
      );
    }), expect(callbackRef1).toHaveBeenCalledTimes(1), expect(callbackRef2).toHaveBeenCalledTimes(1), expect(objectRef1.current).toBeInstanceOf(HTMLDivElement), expect(objectRef2.current).toBeInstanceOf(HTMLDivElement);
  }), test("ref is called when ref changes", () => {
    const ref = jest.fn(), nextRef = jest.fn();
    let rerender;
    act(() => {
      ({ rerender } = render(/* @__PURE__ */ jsx(TestComponent, { refs: [ref] })));
    }), expect(ref).toHaveBeenCalled(), act(() => {
      rerender(/* @__PURE__ */ jsx(TestComponent, { refs: [nextRef] }));
    }), expect(nextRef).toHaveBeenCalled();
  }), test("ref is not called for each rerender", () => {
    const ref = jest.fn();
    let rerender;
    act(() => {
      ({ rerender } = render(/* @__PURE__ */ jsx(TestComponent, { refs: [ref] })));
    }), expect(ref).toHaveBeenCalledTimes(1), act(() => {
      rerender(/* @__PURE__ */ jsx(TestComponent, { refs: [ref] }));
    }), expect(ref).toHaveBeenCalledTimes(1);
  }), test("ref is not called for props changes", () => {
    const ref = jest.fn();
    let rerender;
    act(() => {
      ({ rerender } = render(/* @__PURE__ */ jsx(TestComponent, { id: "foo", refs: [ref] })));
    }), expect(ref).toHaveBeenCalledTimes(1), act(() => {
      rerender(/* @__PURE__ */ jsx(TestComponent, { id: "bar", refs: [ref] }));
    }), expect(ref).toHaveBeenCalledTimes(1);
  });
});
//# sourceMappingURL=index-test.js.map