React-jss has a weird behavior for styles

Question

i am using react-jss for apply styles to my component and when i was testing a component i encountered with a weird behavior

this is what is returned from my component:

 return (
    <div id={id} className={rootClassName} onClick={disabled ? noop : onClick}>
      {content}
    </div>
  )

the rootClassName is ok and there is no issues like type and other stuff like that .

this is my test case :

  test('check if button have correct styles when the scheme prop is ghost', () => {
    const { container } = render(<Button scheme='ghost' title='button' />)

    const button = container.firstChild
    const styles = window.getComputedStyle(button)

    console.log('style', styles)
  })

and this is the style that will be applied when I set scheme='ghost' :

  ghostRoot: {
    minHeight: 42,
    lineHeight: '42px',
    borderRadius: 5,
    border: 'none',
    paddingLeft: 20,
    paddingRight: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    '&:hover': {
     ** backgroundColor: 'rgba(255, 255, 255, 0.4)',**
    },
    '&$withIcon': {
      paddingRight: 16,
    },
  },

the out put of the console.log from my test case is this :

    console.log
      style CSSStyleDeclaration {
        '0': 'display',
        '1': 'cursor',
        '2': 'font-size',
        '3': 'text-align',
        '4': 'border-radius',
        '5': 'min-height',
        '6': 'line-height',
        '7': 'padding-left',
        '8': 'padding-right',
        '9': 'background-color',
        '10': 'visibility',
        _values: {
          display: 'inline-block',
          cursor: 'pointer',
          'font-size': '0px',
          'text-align': 'center',
          'border-radius': '5px',
          'border-top': undefined,
          'border-left': undefined,
          'border-right': undefined,
          'border-bottom': undefined,
          'min-height': '42px',
          'line-height': '42px',
          'padding-left': '20px',
          'padding-right': '20px',
         ** 'background-color': 'rgba(255, 255, 255, 0.4)',**
          visibility: 'visible'
        },
        _importants: {
          display: '',
          cursor: '',
          'font-size': '',
          'text-align': '',
          'border-radius': '',
          border: '',
          'min-height': '',
          'line-height': '',
          'padding-left': '',
          'padding-right': '',
          'background-color': '',
          visibility: undefined
        },
        _length: 11,
        _onChange: [Function (anonymous)]
      }

as you can see above ( bold rules ) the background-color rule has the value of hover styles but there is no hover over the element in side the unit test .

version of jss :

"jss": "^9.8.7",

where is the problem ?