react tests- display:none in stylesheet doesn't work in but works when inline

Question

I am testing if a div is set to display: none . I have set it as such in the stylesheet but the tests tell me that it is still display: block . When I change to inline CSS the tests acknowledge that it is indeed display: none .

and Yes, I did remember to import the stylesheet because the element is invisible in the browser.

Part of the react component

      <div className="navbar-buttons">
        <button type="button">Sign In</button>
      </div>

stylesheet

.navbar-buttons{
  display: none;
}

The test assertion

   expect(signinBtns).toHaveStyle('display: none')

The test result printed to terminal

    expect(element).toHaveStyle()

    - Expected

    - display: none;
    + display: block;

How do I get the tests to recognize the style attributes if they are in a stylesheet?

Answer 1

You can't check if the style attributes are applied via tests, unless it's inline style. You can only check for the class name if it's applied or not and assume it's the right class.