Function Inner

packages/react-aria/test/interactions/useHover.test.js:330–379

()

      }

      function Inner() {
        let [show, setShow] = useState(true);
        return show ? <button onClick={() => setShow(false)}>hide</button> : null;
      }

      let events = [];
      let addEvent = e => events.push(e);
      let res = render(
        <Test
          onHoverStart={addEvent}
          onHoverEnd={addEvent}
          onHoverChange={isHovering => addEvent({type: 'hoverchange', isHovering})}>
          <Inner />
        </Test>
      );

      let el = res.getByTestId('test');
      fireEvent(el, pointerEvent('pointerover', {pointerType: 'mouse'}));
      expect(el).toHaveAttribute('data-hovered', 'true');

      let button = res.getByRole('button');
      act(() => button.click());
      expect(button).not.toBeInTheDocument();

      // browser does not fire pointerout/pointerleave here.
      // but it does fire pointerover on the new target.
      fireEvent(document.body, pointerEvent('pointerover', {pointerType: 'mouse'}));
      expect(el).not.toHaveAttribute('data-hovered');

      expect(events).toEqual([
        {
          type: 'hoverstart',
          target: el,
          pointerType: 'mouse'
        },
        {
          type: 'hoverchange',
          isHovering: true
        },
        {
          type: 'hoverend',
          target: el,
          pointerType: 'mouse'
        },
        {
          type: 'hoverchange',
          isHovering: false
        }
      ]);
    });
  });

  describe('mouse events', function () {