Skip to content

[BUG] Can't pass jest toBeVisible #1058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
rayandben2000 opened this issue Jul 12, 2023 · 8 comments
Closed

[BUG] Can't pass jest toBeVisible #1058

rayandben2000 opened this issue Jul 12, 2023 · 8 comments
Labels
Bug Information Needed Stale This has not seen activity in quite some time

Comments

@rayandben2000
Copy link

Bug description
Even simple code can't pass jest toBeVisible (see To Reproduce section.)

Version of Package
v5.16.1

To Reproduce

Test Code:

it.only('test', async () => {
  const user = userEvent.setup({ advanceTimers: jest.runOnlyPendingTimers });
  const { getByTestId, getByText, getByRole } = render(
    <>
      <div data-testid="test" data-tooltip-id='test' data-tooltip-content='tooltip!'>test</div>
      <ReactTooltip id="test" />
    </>
  );

  expect(getByText('test')).toBeInTheDocument();

  await user.hover(getByTestId('test'));
  expect(getByRole('tooltip', {hidden: true})).toBeVisible();
});

Test Result:

    expect(element).toBeVisible()

    Received element is not visible:
      <div class="react-tooltip core-styles-module_tooltip__3vRRp styles-module_tooltip__mnnfp styles-module_dark__xNqje react-tooltip__place-top" id="test" role="tooltip" />

      357 |
      358 |       await user.hover(getByTestId('test'));
    > 359 |       expect(getByRole('tooltip', {hidden: true})).toBeVisible();
          |                                                    ^
      360 |
      361 |
      362 |     });

Expected behavior
Should pass toBeVisible

Addition information

  • jest: v29.5.0
  • @testing-library/react: 12.1.4
@gabrieljablonski
Copy link
Member

gabrieljablonski commented Jul 12, 2023 •
edited
Loading

Try using waitFor(). After hovering the anchor element, the tooltip can take a few render cycles (usually 1~3 frames) to actually be visible.

Check how we get it to work on our own tests.

@rayandben2000
Copy link
Author

I use waitFor() to rewite my test case, but still get test failed.

Test Code:

it.only('test', async () => {
  const { getByTestId, getByText, getByRole } = render(
    <>
      <div data-testid="test" data-tooltip-id='test' data-tooltip-content='tooltip!'>test</div>
      <ReactTooltip id="test" />
    </>
  );
  
  expect(getByText('test')).toBeInTheDocument();
  
  await userEvent.hover(getByTestId('test'));
  await waitFor(() => {
    expect(getByRole('tooltip')).toBeVisible();
  })
});

Test Result:

expect(element).toBeVisible()

    Received element is not visible:
      <div class="react-tooltip core-styles-module_tooltip__3vRRp styles-module_tooltip__mnnfp styles-module_dark__xNqje react-tooltip__place-top core-styles-module_show__Nt9eE" id="test" role="tooltip" style="l
eft: 5px; top: -10px;" />

    Ignored nodes: comments, script, style
    <html>
      <head />
      <body>
        <div />
        <div>
          <div
            data-testid="test"
            data-tooltip-content="tooltip!"
            data-tooltip-id="test"
          >
            test
          </div>
          <div
            class="react-tooltip core-styles-module_tooltip__3vRRp styles-module_tooltip__mnnfp styles-module_dark__xNqje react-tooltip__place-top core-styles-module_show__Nt9eE"
            id="test"
            role="tooltip"
            style="left: 5px; top: -10px;"
          >
            tooltip!
            <div
              class="react-tooltip-arrow core-styles-module_arrow__cvMwQ styles-module_arrow__K0L3T"
              style="left: -1px; bottom: -4px;"
            />
          </div>
        </div>
      </body>
    </html>

      78 |     // await user.hover(getByTestId('test'));
      79 |     await waitFor(() => {
    > 80 |       expect(getByRole('tooltip')).toBeVisible();
         |                                    ^
      81 |     })
      82 |     // expect(getByRole('tooltip', {hidden: true})).toBeVisible();
      83 |   });

@gabrieljablonski
Copy link
Member

gabrieljablonski commented Jul 12, 2023 •
edited
Loading

Looking at toBeVisible()'s conditions, my guess is there's something wrong with the opacity. Please try the following just as a test (do not use it as a solution! just trying to narrow down the issue):

<ReactTooltip id="test" style={{ opacity: 1 }} />

If nothing changes, also try with visibility: 'visible' (without the opacity: 1), and then with both visibility and opacity set manually.

@rayandben2000
Copy link
Author

Only with both visibility: 'visible' & opacity: 1 can pass the test case

@gabrieljablonski
Copy link
Member 

it.only('test', async () => {
  const { getByTestId, getByText, getByRole } = render(
    <>
      <div data-testid="test" data-tooltip-id='test' data-tooltip-content='tooltip!'>test</div>
      <ReactTooltip id="test" />
    </>
  );
  
  expect(getByText('test')).toBeInTheDocument();
  
  await userEvent.hover(getByTestId('test'));
  await waitFor(() => {
    expect(getByRole('tooltip')).toBeVisible();
  })
});

Running your exact test code with [email protected] and @testing-library/[email protected] passes for me.
We're going to need more info about you dev environment to diagnose this.

Please provide your jest config file, and the node version you're running (probably unrelated but just to be sure).

Aside from that, @danielbarion any ideas on why the test wouldn't pass?

@danielbarion
Copy link
Member

With those pieces of information, I have no Idea @gabrieljablonski.

Maybe after @rayandben2000 gives more information.

@github-actions
Copy link

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

@github-actions github-actions bot added the Stale This has not seen activity in quite some time label Oct 16, 2023
@gabrieljablonski
Copy link
Member

I'll close this for now and we'll track issues with the test suites from #1080.

@gabrieljablonski gabrieljablonski closed this as not planned Won't fix, can't repro, duplicate, stale Oct 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Information Needed Stale This has not seen activity in quite some time
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@danielbarion @gabrieljablonski @rayandben2000