jest-emotion
Advanced tools
jest-emotion - npm Package Compare versions
Comparing version 9.0.0 to 9.1.2
@@ -19,5 +19,18 @@ 'use strict'; | ||
| if (node.children) { | ||
| node.children.forEach(function (child) { | ||
| return getNodes(child, nodes); | ||
| }); | ||
| for (var _iterator = node.children, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { | ||
| var _ref; | ||
| if (_isArray) { | ||
| if (_i >= _iterator.length) break; | ||
| _ref = _iterator[_i++]; | ||
| } else { | ||
| _i = _iterator.next(); | ||
| if (_i.done) break; | ||
| _ref = _i.value; | ||
| } | ||
| var child = _ref; | ||
| getNodes(child, nodes); | ||
| } | ||
| } | ||
@@ -32,18 +45,22 @@ | ||
| function getSelectorsFromClasses(selectors, classes) { | ||
| return classes ? selectors.concat(classes.split(' ').map(function (c) { | ||
| return '.' + c; | ||
| })) : selectors; | ||
| } | ||
| function getSelectorsFromProps(selectors, props) { | ||
| return getSelectorsFromClasses(selectors, props.className || props.class); | ||
| } | ||
| function getSelectorsForDOMElement(selectors, node) { | ||
| return getSelectorsFromClasses(selectors, node.getAttribute('class')); | ||
| } | ||
| function getSelectors(nodes) { | ||
| return nodes.reduce(function (selectors, node) { | ||
| return getSelectorsFromProps(selectors, node.props); | ||
| return isReactElement(node) ? getSelectorsFromProps(selectors, node.props) : getSelectorsForDOMElement(selectors, node); | ||
| }, []); | ||
| } | ||
| function getSelectorsFromProps(selectors, props) { | ||
| var className = props.className || props.class; | ||
| if (className) { | ||
| selectors = selectors.concat(className.split(' ').map(function (cn) { | ||
| return '.' + cn; | ||
| })); | ||
| } | ||
| return selectors; | ||
| } | ||
| function filterChildSelector(baseSelector) { | ||
@@ -65,9 +82,17 @@ if (baseSelector.slice(-1) === '>') { | ||
| function test(val) { | ||
| return val && !val.withEmotionStyles && val.$$typeof === Symbol.for('react.test.json'); | ||
| function isReactElement(val) { | ||
| return val.$$typeof === Symbol.for('react.test.json'); | ||
| } | ||
| var domElementPattern = /^((HTML|SVG)\w*)?Element$/; | ||
| function isDOMElement(val) { | ||
| return val.nodeType === 1 && val.constructor && val.constructor.name && domElementPattern.test(val.constructor.name); | ||
| } | ||
| function createSerializer(emotion) { | ||
| var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
| classNameReplacer = _ref.classNameReplacer; | ||
| var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, | ||
| classNameReplacer = _ref2.classNameReplacer, | ||
| _ref2$DOMElements = _ref2.DOMElements, | ||
| DOMElements = _ref2$DOMElements === undefined ? true : _ref2$DOMElements; | ||
@@ -83,2 +108,6 @@ function print(val, printer) { | ||
| function test(val) { | ||
| return val && !val.withEmotionStyles && (DOMElements ? isReactElement(val) || isDOMElement(val) : isReactElement(val)); | ||
| } | ||
| function markNodes(nodes) { | ||
@@ -85,0 +114,0 @@ nodes.forEach(function (node) { |
| { | ||
| "name": "jest-emotion", | ||
| "version": "9.0.0", | ||
| "version": "9.1.2", | ||
| "description": "Jest utilities for emotion", | ||
@@ -22,2 +22,3 @@ "main": "lib/index.js", | ||
| "npm-run-all": "^4.0.2", | ||
| "pretty-format": "^22.4.3", | ||
| "rimraf": "^2.6.1" | ||
@@ -24,0 +25,0 @@ }, |
@@ -48,2 +48,3 @@ # jest-emotion | ||
| ``` | ||
| ```jsx | ||
@@ -61,2 +62,15 @@ import * as emotion from 'emotion' | ||
| ``` | ||
| ### `DOMElements` | ||
| jest-emotion's snapshot serializer inserts styles and replaces class names in both React and DOM elements. If you would like to disable this behavior for the latter, you can do so by setting this property to false. For example: | ||
| ```jsx | ||
| import * as emotion from 'emotion' | ||
| import { createSerializer } from 'jest-emotion' | ||
| // configures jest-emotion to ignore DOM elements | ||
| expect.addSnapshotSerializer(createSerializer(emotion, { DOMElements: false })) | ||
| ``` | ||
| # getStyles | ||
@@ -82,2 +96,2 @@ | ||
| Thanks to [Kent C. Dodds](https://twitter.com/kentcdodds) who wrote [jest-glamor-react](https://github.com/kentcdodds/jest-glamor-react) which this library is largely based on. | ||
| Thanks to [Kent C. Dodds](https://twitter.com/kentcdodds) who wrote [jest-glamor-react](https://github.com/kentcdodds/jest-glamor-react) which this library is largely based on. |
@@ -10,3 +10,4 @@ // @flow | ||
| type Options = { | ||
| classNameReplacer: ClassNameReplacer | ||
| classNameReplacer: ClassNameReplacer, | ||
| DOMElements: boolean | ||
| } | ||
@@ -16,3 +17,5 @@ | ||
| if (node.children) { | ||
| node.children.forEach(child => getNodes(child, nodes)) | ||
| for (let child of node.children) { | ||
| getNodes(child, nodes) | ||
| } | ||
| } | ||
@@ -27,5 +30,22 @@ | ||
| function getSelectorsFromClasses(selectors, classes) { | ||
| return classes | ||
| ? selectors.concat(classes.split(' ').map(c => `.${c}`)) | ||
| : selectors | ||
| } | ||
| function getSelectorsFromProps(selectors, props) { | ||
| return getSelectorsFromClasses(selectors, props.className || props.class) | ||
| } | ||
| function getSelectorsForDOMElement(selectors, node) { | ||
| return getSelectorsFromClasses(selectors, node.getAttribute('class')) | ||
| } | ||
| function getSelectors(nodes) { | ||
| return nodes.reduce( | ||
| (selectors, node) => getSelectorsFromProps(selectors, node.props), | ||
| (selectors, node) => | ||
| isReactElement(node) | ||
| ? getSelectorsFromProps(selectors, node.props) | ||
| : getSelectorsForDOMElement(selectors, node), | ||
| [] | ||
@@ -35,10 +55,2 @@ ) | ||
| function getSelectorsFromProps(selectors, props) { | ||
| const className = props.className || props.class | ||
| if (className) { | ||
| selectors = selectors.concat(className.split(' ').map(cn => `.${cn}`)) | ||
| } | ||
| return selectors | ||
| } | ||
| function filterChildSelector(baseSelector) { | ||
@@ -60,7 +72,14 @@ if (baseSelector.slice(-1) === '>') { | ||
| function test(val: *) { | ||
| function isReactElement(val) { | ||
| return val.$$typeof === Symbol.for('react.test.json') | ||
| } | ||
| const domElementPattern = /^((HTML|SVG)\w*)?Element$/ | ||
| function isDOMElement(val) { | ||
| return ( | ||
| val && | ||
| !val.withEmotionStyles && | ||
| val.$$typeof === Symbol.for('react.test.json') | ||
| val.nodeType === 1 && | ||
| val.constructor && | ||
| val.constructor.name && | ||
| domElementPattern.test(val.constructor.name) | ||
| ) | ||
@@ -71,3 +90,3 @@ } | ||
| emotion: Emotion, | ||
| { classNameReplacer }: Options = {} | ||
| { classNameReplacer, DOMElements = true }: Options = {} | ||
| ) { | ||
@@ -89,2 +108,12 @@ function print(val: *, printer: Function) { | ||
| function test(val: *) { | ||
| return ( | ||
| val && | ||
| !val.withEmotionStyles && | ||
| (DOMElements | ||
| ? isReactElement(val) || isDOMElement(val) | ||
| : isReactElement(val)) | ||
| ) | ||
| } | ||
| function markNodes(nodes) { | ||
@@ -91,0 +120,0 @@ nodes.forEach(node => { |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by19.78%
13824
- Lines of code
- increased by17.31%
305
- Number of lines in readme file
- increased by18.75%
95
Worsened metrics
- Dev dependency count
- increased by33.33%
4
No dependency changes