Jest-styled-components: Snapshot of style rule(s)

[WickyNilliams]

It would be nice if we could snapshot style rules, instead of explicitly asserting on them in tests.

e.g. instead of:

expect(component).toHaveStyleRule("transition", "height 50ms ease-out, opacity 50ms ease-out 50ms, transform 50ms ease-out 50ms;");

we could do something like (API up for discussion):

expect(component.getStyleRule("transition")).toMatchSnapshot();

[WickyNilliams]

I guess I just want some way to snapshot styles, without caring about the rest of the DOM. I don't want to mount and snapshot the whole component because the snapshots might be huge. And toHaveStyleRule can get verbose, especially when sometimes there are modifiers like hover or child selectors at play. I usually have existing tests that exercise the DOM, i want separate tests for styles.

So maybe something like expect(component).toHaveStylesMatchingSnapshot()? Jest has methods like toThrowErrorMatchingSnapshot() so it's not unheard of to have other snapshot methods beyond the standard/basic one

[MicheleBertoli]

Thank you very much, @WickyNilliams.
Would you be happy to submit a PR?

[iilei]

I would love this feature too :+1:

[vctormb]

Will it be released? It will be so cool!!

[Joebourne]

I see it's been a while since any activity on this issue so I'll take a look at it and see if I can submit a PR soon.

[Joebourne]

@MicheleBertoli I have an idea for a basic initial implementation and would appreciate your thoughts before I submit a PR.

Currently we have toHaveStyleRule(). This could be split into two functions getStyleRule() and toHaveStyleRule() (which would use getStyleRule()). We could then expose getStyleRule() in the library's public API and assert on that.

An example usage:

import { getStyleRule } from 'jest-styled-components';

describe('MyComponent', () => {
  it('should ...', () => {
    expect(getStyleRule(<MyComponent />, 'color')).toMatchSnapshot();
  })
})

In a follow-up PR, we could look at creating an entirely new assertion, toHaveStyleRuleMatchingSnapshot().

[MicheleBertoli]

+1 getStyleRule(<MyComponent />, 'color') seems quite a nice API.

I have a couple of questions:

• Should we let the users decide how to render their components?

For example:

const tree = renderer.create(<Button />).toJSON() // or shallow(<Button />), or mount(<Button />)
expect(getStyleRule(tree, 'color')).toMatchSnapshot();

• What about the modifiers (e.g. media queries)?

Thank you very much for working on this, @Joebourne.

[Joebourne]

As I'll be abstracting existing logic, users will indeed be able to choose how to render components, and the modifiers will also be available as options can be passed as a third argument to getStyleRule.

No problem, I'll submit a PR this week.

[AbhiPrasad]

Is this still in the works? Would love to use it our projects!