jest-styled-components - npm Package Compare versions

Comparing version 3.1.3 to 3.1.4

package.json

 {
   "name": "jest-styled-components",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Jest utilities for Styled Components",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

README.md

@@ -12,4 +12,58 @@ [![Build Status](https://travis-ci.org/styled-components/jest-styled-components.svg?branch=master)](https://travis-ci.org/styled-components/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'
+
+test('with react-test-renderer', () => {
+  const tree = renderer.create(<MyComponent />).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 { shallow, mount } from 'enzyme'
+import toJSON from 'enzyme-to-json'
+
+test('with enzyme', () => {
+  const wrapper = shallow(<MyComponent />) // or mount(<MyComponent />)
+  const subject = wrapper.find('.btn-primary')
+  expect(subject).toHaveStyleRule('color', 'whitesmoke')
+  
+  const tree = toJSON(wrapper)
+  expect(tree).toMatchStyledComponentsSnapshot()
+})
+```
+
+[enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json) is needed for snapshot testing only.
+
+
 ## toMatchStyledComponentsSnapshot [React]
 
+[Learn more](https://facebook.github.io/jest/docs/snapshot-testing.html) about Snapshot Testing with Jest. This matcher
+is used to assert complex selectors or to test your entire component in one go.
+
 ### Preview
@@ -33,2 +87,4 @@
 
+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
@@ -52,2 +108,3 @@
 
+
 ### Preview
@@ -54,0 +111,0 @@

src/utils.js

@@ -21,7 +21,9 @@ const { ServerStyleSheet } = require('styled-components')
   if (overV2 && isServer()) {
-    return new ServerStyleSheet().getStyleTags().match(STYLE_TAGS_REGEXP)[1]
+    const matches = new ServerStyleSheet().getStyleTags().match(STYLE_TAGS_REGEXP)
+    return matches ? matches[1] : ''
+  } else if (overV2) {
+    const matches = styleSheet.default.instance.toHTML().match(STYLE_TAGS_REGEXP)
+    return matches ? matches[1] : ''
   }
-  if (overV2) {
-    return styleSheet.default.instance.toHTML().match(STYLE_TAGS_REGEXP)[1]
-  }
+
   return styleSheet.rules().map(rule => rule.cssText).join('\n')
@@ -28,0 +30,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15794

increased by10.64%

Lines of code

307

increased by0.33%

Number of lines in readme file

124

increased by85.07%

No dependency changes