getComputedStyle for the element when its parent is focused

Question

I have a parent which sets a style for the children when it is focused. Which works perfectly when I compile my react project.

I am using react emotion, but it does not matter, because in the end I have usual css.

  const parentStyle = css`
    :focus {
      #child {
        border: 2px solid blue !important;
      }
    }
  `;

I want to get from within child element the border style.

I am using jest to test this and I tried something like this.

parent.simulate('focus');
const childNode = wrapper.find("#child");
const computedStyles = window.getComputedStyle(childNode);
expect(computedStyles.getPropertyValue('border')).toBe('2px solid blue');

So the expect is failing, it is not getting the border style.

@Webber sorry, just updated. my expect function is not working, its not getting style of the border — AlexZvl, Mar 27 '19 at 14:27
Hmm, have you tried the longhand names? See first [note](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#Notes) in the documentation of computedStyles — Webber, Mar 27 '19 at 14:35

score 0 · Answer 1 · answered Aug 27 '22 at 08:50

0

Please try to use .element instead (if you still need the answer):

const computedStyles = window.getComputedStyle(childNode.element);

answered Aug 27 '22 at 08:50

Milky Man

1
1

getComputedStyle for the element when its parent is focused

1 Answers1