Reach-ui: Cannot test @reach/tooltip

[hjylewis]

Adding application tests around @reach/tooltip seems nondeterministic due to the module globals.

One solution would be to expose a "state reset" function that can be used after every test.

[raunofreiberg]

Any chance this would get some attention? I'm trying to test our Tooltip component (which is using the useTooltip hook) and the tooltip does not seem to get triggered when onMouseEnter event is fired in Jest.

test('should render', () => {
    const { container, getByText, debug } = render(
        <Tooltip label="label">
            <button>label</button>
        </Tooltip>,
    );
    const tooltip = container.querySelector('[data-reach-tooltip-trigger]');
    fireEvent.mouseEnter(tooltip);
    debug(); // Tooltip does not appear in DOM
});

cc @chancestrickland ?

[evertbouw]

The tooltip only shows up after a delay, so you have to use jest.useFakeTimers(). Here is my passing test

test("Tooltip", () => {
    jest.useFakeTimers();

    const { getByText, queryByText } = render(
        <Tooltip label="༼ つ ◕_◕ ༽つ">
            <Button>Butts</Button>
        </Tooltip>,
    );

    act(() => {
        fireEvent.mouseOver(getByText("Butts"));
        jest.runAllTimers();
    });

    expect(queryByText("༼ つ ◕_◕ ༽つ")).toBeTruthy();

    act(() => {
        fireEvent.mouseOut(getByText("Butts"));
        jest.runAllTimers();
    });

    expect(queryByText("༼ つ ◕_◕ ༽つ")).toBeNull();
});

[raunofreiberg]

@evertbouw Thanks, that works for me too!

[indiesquidge]

@hjylewis does the example test above help out in your ability to test the tooltip, or is this still an outstanding issue for you? If it is, can you provide context on what you're trying to test and where it's breaking down?

[hjylewis]

@indiesquidge Not really. My issue arises when you have multiple tests. Since there's a shared global state with the tooltips, the test influence each other which leads to non-deterministic behavior.

Let me put together an example.

[evertbouw]

It might be better to use waitFor. Would that fix your case?

https://testing-library.com/docs/guide-disappearance

It would make your test take a little longer if it has to wait for the actual animation duration.

[hjylewis]

So I believe my issue was fixed with this PR #203.

Before, new Tooltips in tests were visibile if one Tooltip was visible in a different test.

Thanks for your help!