Jest + Enzyme - test for component visibility to the user

Question

Currently we use this to test whether a component has ben rendered:

const someComponent = component.find('[data-test="some-component"]').at(0);
expect(someComponent.length).toBe(1);

This is fine, but it isn't actually testing that the component is visible to the user - it simply tests that the component exists. How to test that a component both exists and is visible to the user?

Answer 1

Check out https://github.com/testing-library/jest-dom which offers a variety of custom DOM matchers for Jest, including toBeVisible().

With it you could write a test like this, which should work:

const someComponent = component.find('[data-test="some-component"]').at(0);
expect(someComponent.getDOMNode()).toBeVisible();

Edit: though the title of OP's post says "Jest + Enzyme" I should clarify that getDomNode() is an Enzyme function, so the above won't work if you're only using Jest. Here's the docs page for using Enzyme with Jest.