How to test this kind of components?

Question

JavaScript

There is this component:

<div className={cn('list', { active: isOpen })}>
      <Visible xs sm md>
        <AdditionalComponent />
      </Visible>
      Hello world!
    </div>

Visible component is used from react-grid-system. First thing that came to mind:

global.innerWidth = 500;
global.dispatchEvent(new Event('resize'));

But is it right to do so?

Answer 1

These tests are usually Brittle because the jest dom is not the full DOM of the browser, so they need to be approached with extreme care.