diff --git a/README.md b/README.md index b382124..3c23709 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,73 @@ ## Installation + ``` yarn add --dev jest-styled-components ``` +To render React components for testing you can use either `react-test-renderer` or `enzyme`. + +**Using react-test-renderer** + + +Installation: + +``` +yarn add --dev react-test-renderer +``` + +Usage: + +```js +import renderer from 'react-test-renderer' + +// somewhere in your tests +test('matches the styled components snapshot', () => { + const tree = renderer.create().toJSON() + expect(tree).toMatchStyledComponentsSnapshot() + expect(tree).toHaveStyleRule('display', 'block') +}) +``` + + + +**Using enzyme and enzyme-to-json** + +Installation: + +``` +yarn add --dev enzyme enzyme-to-json +``` + +Usage: + + +```js +import {mount} from 'enzyme' +import toJSON from 'enzyme-to-json' + +// inside your test +test('can use enzyme instead of react-test-renderer', () => { + const wrapper = mount() + const tree = toJSON(wrapper) + + const selector = '.btn-primary' + const subject = wrapper.find(selector) + expect(subject).toHaveStyleRule('color', 'whitesmoke') + expect(tree).toMatchStyledComponentsSnapshot() +}) +``` + +`enzyme-to-json` is only needed for snapshot testing, to learn more about snapshot testing with enzyme, go [here](https://www.npmjs.com/package/enzyme-to-json) + + ## toMatchStyledComponentsSnapshot [React] +Learn more about Snapshot Testing with Jest [here](https://facebook.github.io/jest/docs/snapshot-testing.html), this matcher +is used to assert complex selectors or to test your entire component in one go. + + ### Preview Preview @@ -29,6 +90,10 @@ expect(tree).toMatchStyledComponentsSnapshot() ## toHaveStyleRule [React] +Only checks for the styles directly applied to the component it receives, to assert that a complex selector has been applied to +a component, use `toMatchStyledComponentsSnapshot` instead. + + ### Preview Preview @@ -47,6 +112,7 @@ expect(tree).toHaveStyleRule('property', value) ## toHaveStyleRule [React Native] + ### Preview Preview @@ -64,3 +130,4 @@ import 'jest-styled-components/native' expect(tree).toHaveStyleRule('property', value) ``` +