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?

i didn't quite understand what do you mean by existence, if a component is rendered it will be exist for the user unless there is a flag hides the component, in that case you have to toggle the flag in your tests and see if your component is rendered after it or not — wahdan

runofthemill runofthemill · Accepted Answer · 2019-10-18T19:37:04

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.

Jest + Enzyme - test for component visibility to the user

1 Answers