Add bare minimum documentation #34
Conversation
There was a problem hiding this comment.
WOW, thanks for helping with the docs @vamsiampolu .
I just added a few comments, and I'm more than happy to merge this.
README.md
Outdated
| ``` | ||
| yarn add --dev jest-styled-components | ||
| ``` | ||
|
|
||
| This package must be used with either `react-test-renderer` or `enzyme` and `enzyme-to-json` to generate a serialized `tree` from your component. |
There was a problem hiding this comment.
This should be more generic, like "To render React components for testing you can use either [...]" because it doesn't apply to this package only.
Also, enzyme-to-json is only needed for snapshots testing.
README.md
Outdated
| import renderer from 'react-test-renderer' | ||
|
|
||
| // somewhere in your tests | ||
| it('matches the styled components snapshot', () => { |
README.md
Outdated
| // somewhere in your tests | ||
| it('matches the styled components snapshot', () => { | ||
| const tree = renderer.create(<MyComponent />).toJSON() | ||
| expect(tree).toMatchStyledComponentsSnapshot() |
README.md
Outdated
| }) | ||
| ``` | ||
|
|
||
| For more info on using react-test-renderer with jest for snapshots see [this](https://facebook.github.io/jest/docs/snapshot-testing.html) |
There was a problem hiding this comment.
Can we rephrase this to "Lear more about Snapshot Testing with Jest." or something similar?
Also, I personally wrote the FAQs in that page :)
README.md
Outdated
|
|
||
| Usage: | ||
|
|
||
| This module is not compatible with shallow rendering, components must use the full DOM rendering with `mount` |
There was a problem hiding this comment.
I only added this because I saw this message:
Expected ${received} to be a component from react-test-renderer, or a mounted enzyme component.
Also, when is retrieving a child component asserting for its styles when it is within a larger component necessary and when is it to be avoided?
There was a problem hiding this comment.
You are absolutely right, that message should be updated.
My idea was to make it similar to the toHaveStyleRule matcher for RN.
README.md
Outdated
| import toJSON from 'enzyme-to-json' | ||
|
|
||
| // inside your test | ||
| it('can use enzyme instead of react-test-renderer', () => { |
README.md
Outdated
|
|
||
| ```js | ||
| import {mount} from 'enzyme' | ||
| import toJSON from 'enzyme-to-json' |
There was a problem hiding this comment.
enzyme-to-json can be used like this in each test file, or it can be added globally (which is more convenient).
README.md
Outdated
| @@ -29,6 +83,9 @@ expect(tree).toMatchStyledComponentsSnapshot() | |||
|
|
|||
| ## toHaveStyleRule [React] | |||
|
|
|||
| Only checks for the styles directly applied to the component it receives, to assert that a style has been applied to a child | |||
There was a problem hiding this comment.
to assert that a style has been applied to a child component
You can make assertion on a child component using Enzyme's find.
Snapshots should be used for testing complex selectors and/or the entire output in one go.
There was a problem hiding this comment.
If you assign a style to a component from a library ( a component that you do not own), would you use toMatchSnapshot or would you try and find it, esp. if unstyled and styled elements of the same target elementt are in the subject component.
|
Thanks @vamsiampolu this has helped me too! |
|
🙌 Thank you very much @vamsiampolu |
@MicheleBertoli I took your comments from the issue and added it to the README #33