5.11.10 broke toBeVisible and toBeInTheDocument

[ArtemKolichenkov]

• @testing-library/jest-dom version: 5.11.10
• node version: 14.15.4
• npm (or yarn) version: 6.14.10
• react-testing-library version: 11.2.5 (but behaves the same with newer 11.2.6

Relevant code or config:

describe('when valid files are dropped to the upload area', () => {

  beforeAll(async () => {
    ...
    wrapper = renderComponent();
    const uploadArea = await wrapper.findByTestId('upload-area');
    fireEvent.drop(uploadArea, { target: { files: droppedFiles } });
  
    listElements.fileOne = await wrapper.findByText('fileOne.png');
    listElements.fileTwo = await wrapper.findByText('fileTwo.mp4');
  });
  
  describe.each`
        fileType.     | fileTypeDescription
        ${'fileOne'}  | ${'Photo'}
        ${'fileTwo'}  | ${'Video'}
      `('$fileType file', ({ fileType, fileTypeDescription }) => {
        it(`renders the upload list with the added ${fileType} file`, () => {
          // This fails
          expect(listElements[fileType]).toBeVisible();
        });
  
       it(`renders the type of the added ${fileType} file`, () => {
          // This works fine
          expect(listElements[fileType].closest('div')).toHaveTextContent(fileTypeDescription);
        });
    });
  });

});

What you did:

Upgraded @testing-library/jest-dom from 5.11.9 to 5.11.10

What happened:

Reproduction:

Unfortunately I can't share company code. The code block above is roughly the context when it happens. I've tried to make minimal example on codesandbox but in simplest example it actually works just fine, I need to figure out what exactly causing the issue. If I'll have time for this later this week I'll update this issue, now unfortunately can't spend hours finding root cause, I just know that the only reason why it fails is upgrade

Problem description:

After upgrading @testing-library/jest-dom from 5.11.9 to 5.11.10 .toBeVisible() throws with Received element is not visible (element is not in the document) even though RTL's debug() shows the element just fine. And tests were passing without any warnings or errors just one patch version before in 5.11.9. Similar behaviour with toBeInTheDocument()

Suggested solution:

According to changelog - this PR is the only change. Not really sure why and how though.

[gnapse]

Hi. I'm sorry this upgrade broke things for you.

Unfortunately, we do not have much here in terms of where to look. The release you pointed out only touched code related to the toContainHTML matcher, and nothing in any code that's shared with other matchers. Also, without a minimal repo where this can be reproduced, we can't do much.

Can you reliably have the problem fixed if you downgrade to v5.11.9? The answer to this question is to further confirm that this release is to blame.

[ArtemKolichenkov]

Yeah, our latest master branch uses 5.11.9, all tests pass - 0 warnings and 0 errors.
If I upgrade @testing-library/jest-dom to 5.11.10 and do nothing else at all - some tests break.
Originally I thought I need to update other dev packages but upgrading them didn't do anything.

I've tried to make reproducible example yesterday but it seems that with simple setup it works fine, I will try to mimic the exact test that fails in our repo. It might be related to nested dom elements or something. Not sure if I have time today for this, but at least will try to do so on weekend.

[drdent]

I have the same issue for some specs as well. It seems to be related to self closing tags, a bugfix introduced in version 5.11.10

For example:

expect(wrapper.find('.clear-filter').classes('hidden')).toBe(true) //works
expect(wrapper.find('.clear-filter').element).toBeVisible(false) //fails

It seems like the classes are gone as well and the tag is self closed, because the error messages looks like:

Received element is not visible (element is not in the document): 
<a class="clear-filter" />

But actually the element has the class hidden and it is not self closed:

console.log(wrapper.find('.clear-filter').html())
<a class="clear-filter hidden">
  ["clear"]
</a>

[gnapse]

An example where we can reproduce this will go a long way in being able to solve it. As it stands now, I am not even sure where to start, as this has not posed a problem in general (as acknowledged by Artem above when trying to reproduce it in an isolated manner).

[phaust]

I have the same issue. Running some unit tests of a Vue 2 project with vue-test-utils and jest-dom. Everything is fine when running the unit tests with version 5.11.9 but all tests using toBeVisible() custom matchers fail when upgrading to version 5.11.10.

@drdent describes the problem very well. It seems to have something to do with self closing HTML tags.

[drdent]

Actually I found a solution:
I found the important hint at vue-test-utils:
vuejs/vue-test-utils#1819

You have to attach the component to the DOM, like:
mount(Component, {attachTo: document.body})

@ArtemKolichenkov @phaust You can give it a try.

[phaust]

Yeah, that solution works for me. Thx @drdent for providing it.

[wabuMike]

I have upgraded from 5.11.0 to 5.12.0. All tests with .toBeVisible() then failed with

Received element is not visible (element is not in the document)

Solution from @drdent fixed all cases

[gnapse]

@ArtemKolichenkov can we close this issue?

[regulardesigner]

Same problem here, resolved by using the solution provided by @drdent.

Thanks, @drdent you've saved my day! 🙏

[gnapse]

Thanks for the feedback everyone. I'm closing this for now.

[aethr]

For users of vue-test-utils who find this issue, there is also an alternative isVisible check in VueWrapper that might be a better practice for Vue projects, from vuejs/test-utils#628.

expect(wrapper.find('nav').isVisible()).toBe(true);

[albuseh]

hi @gnapse , I face this issue too when try to upgrade jest-dom to the latest version. It worked on 5.11.9.
@testing-library/jest-dom version: 5.11.10
node version: 12.6
npm (or yarn) version: 7.5.4
react-testing-library version: 9.4.0

[gnapse]

@albuseh an example where we can reproduce this will go a long way in being able to help you solve it.

[katherine-boost]

Actually I found a solution:
I found the important hint at vue-test-utils:
vuejs/vue-test-utils#1819

You have to attach the component to the DOM, like:
mount(Component, {attachTo: document.body})

@ArtemKolichenkov @phaust You can give it a try.

@drdent, thank you so much for posting this! 🙏 I had the same problem as others in this thread, adding attachTo: document.body fixed my test suite.
As @phaust said, the issue seems to relate to elements with self-closing tags.