Please improve documentation

[vamsiampolu]

I am having a lot of trouble understanding the documentation of jest-styled-components, for example:

1. what is tree, how was tree generated in the examples?

expect(tree).toHaveStyleRule(property, value)

I only found out after looking at the docs of react-test-renderer for generating snapshots that I would have to use it to generate the tree.

2. which version of styled-components do you support and do you need me to import the babel-plugin?

I read in the issue #29 and I decided to include it anyways.

3. How can I test styles for nested components using haveStyleRule such as

styled(MyComponent)`
   > .a .b {
      display: ${props => props.a ? inline: block}; 
  }
`

I ended up using snapshots to test the component

[MicheleBertoli]

Thanks for opening the issue @vamsiampolu.

I'm sorry for the troubles you are experiencing with the current docs, my first goal was to make this package solid (I'm still working on it) and then write proper docs.
Any help is also highly appreciated : )

1. a tree could be either a serialised tree generated by react-test-renderer, or any enzyme wrapper (you would need enzyme-to-json to make the snapshots work in that case).

2. at the moment the package supports the latest version of styled-component, even though I'm working to create a better solution (please follow Jest snapshot testing passing unique classNames #29).

3. toHaveStyleRule checks only the styles directly applied to the component it receives, and the best way of testing a more complex scenario would be using snapshots as you already did.

Please let me know if this helps.

[vamsiampolu]

A few more questions:

1. that might be important, where do we need to import jest-styled-components, do we import it once per .spec file or do we configure it elsewhere?

2. Do you prefer enzyme-to-json over jest-enzyme-serializer for use with jest-styled-components?

[MicheleBertoli]

Hello @vamsiampolu, thanks for your questions.

1. if you want to use the package "globally" (i.e. in more than one test) then it's worth importing it using Jest's setupTestFrameworkScriptFile.

2. what jest-enzyme-serializer does is requiring enzyme-to-json code so it doesn't make any real difference.

I hope this helps.