Repository: facebook/react
File: packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js (JavaScript)

Code before:

      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe('<div><input></div>');

      const inner = innerRef.current;
      const target = createEventTarget(inner);
      target.keydown({key: 'Tab'});
      target.focus();
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);

      suspend = true;
      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe(
        '<div><input style="display: none;">Loading...</div>',
      );
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
      await act(() => {
        suspend = false;
        resolve();
      });
    });

    // @gate www
    it('is called after a focused suspended element is hidden then shown', async () => {
      const Suspense = React.Suspense;
      let suspend = false;
      let resolve;
      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
      const buttonRef = React.createRef();

      function Child() {
        if (suspend) {
          throw promise;
        } else {
          return <input ref={innerRef} />;
        }
      }

      const Component = ({show}) => {
        const focusWithinRef = useFocusWithin(ref, {
          onBeforeBlurWithin,
          onAfterBlurWithin,
        });

        return (

Review comment (bug):
Matches other testing patterns e.g. https://github.com/facebook/react/blob/a8875eab7f78a453d22370d1061a8bb3cd672b9d/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js#L773-L777

Without also ensuring we don't throw the promise, we end up in an infinite loop and ultimately crash with `RangeError: Potential infinite loop: exceeded 1500 iterations.`

Code after:

      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe('<div><input></div>');

      const inner = innerRef.current;
      const target = createEventTarget(inner);
      target.keydown({key: 'Tab'});
      target.focus();
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);

      suspend = true;
      await act(() => {
        root2.render(<Component />);
      });
      expect(container2.innerHTML).toBe(
        '<div><input style="display: none;">Loading...</div>',
      );
      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
      expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
      await act(() => {
        suspend = false;
        resolve();
      });
      expect(container2.innerHTML).toBe('<div><input style=""></div>');
    });

    // @gate www
    it('is called after a focused suspended element is hidden then shown', async () => {
      const Suspense = React.Suspense;
      let suspend = false;
      let resolve;
      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
      const buttonRef = React.createRef();

      function Child() {
        if (suspend) {
          throw promise;
        } else {
          return <input ref={innerRef} />;
        }
      }

      const Component = ({show}) => {
        const focusWithinRef = useFocusWithin(ref, {
          onBeforeBlurWithin,
          onAfterBlurWithin,
        });