Is there any ways to get style for pseudo-class?

[Ailrun]

• jest-glamor-react version: v4.2.1
• node version: v8.9.4
• npm (or yarn) version: v5.6.0

Relevant code or config

const TestComp = glamorous.div({
  '::after': {
    backgroundColor: 'white',
  },
});

it('should have white background', () => {
  const component = enzyme.shallow(<TestComp />);
  expect(component).toHaveStyleRule(/* What should I do ??? */);
});

What you did: Try to test pseudo-class style

What happened: No way to test it

Problem description:

Suggested solution: Add some matchers? or add functions to the matcher?

[Ailrun]

and thank you for great library!

[kentcdodds]

I'm afraid I don't think that's currently supported.

If we could make it work with jest-dom that would be sweet. Then you could use this: https://github.com/gnapse/jest-dom/issues/6

[kentcdodds]

Either way, I think this would be great:

expect(component).toHaveStyleRule({
  '::after': {
    backgroundColor: 'white',
  },
})

I'm not sure how to do that though and I'm afraid I don't have the time to work on it personally.

[Ailrun]

That's frustrating... I try to find a way, and if I succeed, I will send a PR.

[juanjose-lopez-trustyou]

Hello! @kentcdodds Do you know if toHaveStyleRule works with pseudo selectors? Thanks and sorry for the noise!

[michaelryancaputo]

Hello! @kentcdodds Do you know if toHaveStyleRule works with pseudo selectors?

Im having this problem, currently unable to detect styles applied when :focus is made. My understanding is that this should work.

  const TEXT = 'PLACEHOLDER';
  const { getByText } = render(
    <StyledDesktopNavigationLink>{TEXT}</StyledDesktopNavigationLink>,
  );

  getByText(TEXT).focus();
  expect(getByText(TEXT)).toHaveStyle(`color: ${EMPHASIS_FILL}`);