jest-styled-components
Advanced tools
jest-styled-components - npm Package Compare versions
Comparing version 4.9.0-0 to 4.9.0
| { | ||
| "name": "jest-styled-components", | ||
| "version": "4.9.0-0", | ||
| "version": "4.9.0", | ||
| "description": "Jest utilities for Styled Components", | ||
@@ -16,3 +16,6 @@ "main": "./src/index.js", | ||
| "precommit": "lint-staged", | ||
| "test": "jest" | ||
| "test": "yarn test:web && yarn test:native && yarn test:preact", | ||
| "test:web": "jest", | ||
| "test:native": "jest --config .jest.native.json", | ||
| "test:preact": "jest --config .jest.preact.json" | ||
| }, | ||
@@ -22,2 +25,4 @@ "devDependencies": { | ||
| "babel-jest": "^21.0.2", | ||
| "babel-plugin-transform-class-properties": "^6.24.1", | ||
| "babel-plugin-transform-object-rest-spread": "^6.26.0", | ||
| "babel-preset-es2015": "^6.24.1", | ||
@@ -43,2 +48,3 @@ "babel-preset-react": "^6.24.1", | ||
| "react-dom": "^16.0.0", | ||
| "react-native": "^0.49.3", | ||
| "react-test-renderer": "^16.0.0", | ||
@@ -66,4 +72,8 @@ "styled-components": "^2.1.1" | ||
| "enzyme-to-json/serializer" | ||
| ], | ||
| "testPathIgnorePatterns": [ | ||
| "<rootDir>/test/native", | ||
| "<rootDir>/test/preact" | ||
| ] | ||
| } | ||
| } |
@@ -39,2 +39,14 @@ [](https://www.npmjs.com/package/jest-styled-components) | ||
| Table of Contents | ||
| ================= | ||
| * [Snapshot Testing](#snapshot-testing) | ||
| * [Enzyme](#enzyme) | ||
| * [Theming](#theming) | ||
| * [Preact](#preact) | ||
| * [toHaveStyleRule](#tohavestylerule) | ||
| * [Global installation](#global-installation) | ||
| * [styled-components < v2](#styled-components--v2) | ||
| * [Contributing](#contributing) | ||
| # Snapshot Testing | ||
@@ -41,0 +53,0 @@ |
@@ -1,42 +0,20 @@ | ||
| const parse = require('styled-components/lib/vendor/postcss-safe-parser/parse') | ||
| function toHaveStyleRule(component, name, expected) { | ||
| const { rules } = component.type() | ||
| const props = component.props() | ||
| const ast = parse(rules.join()) | ||
| const styles = component.props.style.filter(x => x) | ||
| /** | ||
| * Fail by default | ||
| * Convert style name to camel case (so we can compare) | ||
| */ | ||
| let pass = false | ||
| const camelCasedName = name.replace(/-(\w)/, (_, match) => | ||
| match.toUpperCase() | ||
| ) | ||
| /** | ||
| * There can be two cases: | ||
| * - rule (dynamic property, value is a function of props) | ||
| * - decl (static property, value is a string) | ||
| * | ||
| * We also take the last matched node because | ||
| * developer may override initial assignment | ||
| * Merge all styles into one final style object and search for the desired | ||
| * stylename against this object | ||
| */ | ||
| const node = ast.nodes | ||
| .filter(n => { | ||
| switch (n.type) { | ||
| case 'rule': | ||
| return n.selector.indexOf(name) === 0 | ||
| case 'decl': | ||
| return n.prop === name | ||
| default: | ||
| return false | ||
| } | ||
| }) | ||
| .pop() | ||
| const mergedStyles = styles.reduce((acc, item) => ({ ...acc, ...item }), {}) | ||
| const received = mergedStyles[camelCasedName] | ||
| const pass = received === expected | ||
| let received | ||
| /** | ||
| * If node is not found (typo in the rule name / | ||
| * rule isn't specified for component), we return | ||
| * a special message | ||
| */ | ||
| if (!node) { | ||
| if (!received) { | ||
| const error = `${name} isn't in the style rules` | ||
@@ -46,3 +24,3 @@ return { | ||
| `${this.utils.matcherHint('.toHaveStyleRule')}\n\n` + | ||
| `Expected ${component.name()} to have a style rule:\n` + | ||
| `Expected ${component.type} to have a style rule:\n` + | ||
| ` ${this.utils.printExpected(`${name}: ${expected}`)}\n` + | ||
@@ -55,29 +33,2 @@ 'Received:\n' + | ||
| /** | ||
| * In a case of declaration, it's fairly easy to check if expected === given | ||
| */ | ||
| if (node.type === 'decl') { | ||
| pass = node.value === expected | ||
| received = node.value | ||
| /** | ||
| * But in case of rule we have quite some complexity here: | ||
| * We can't get a ref to the function using `postcss-safe-parser`, so | ||
| * we have to construct it by ourselves. We also don't know how user called `props` | ||
| * in his value function, so we parse the entire CSS block to match its params and body | ||
| * | ||
| * Once params are matched, we construct a new function and | ||
| * invoke it with props, taken from the enzyme | ||
| */ | ||
| } else { | ||
| const match = node.source.input.css.match( | ||
| new RegExp(`${name}:.*,function (.*){(.*)},`) | ||
| ) | ||
| const param = match[1].slice(1, -1) | ||
| /* eslint-disable */ | ||
| const fn = Function(param, match[2]) | ||
| /* eslint-enable */ | ||
| received = fn(props) | ||
| pass = received === expected | ||
| } | ||
| const diff = | ||
@@ -92,6 +43,6 @@ '' + | ||
| `${this.utils.matcherHint('.not.toHaveStyleRule')}\n\n` + | ||
| `Expected ${component.name()} not to contain:\n${diff}` | ||
| `Expected ${component.type} not to contain:\n${diff}` | ||
| : () => | ||
| `${this.utils.matcherHint('.toHaveStyleRule')}\n\n` + | ||
| `Expected ${component.name()} to have a style rule:\n${diff}` | ||
| `Expected ${component.type} to have a style rule:\n${diff}` | ||
@@ -98,0 +49,0 @@ return { message, pass } |
| const css = require('css') | ||
| const { getCSS, getHashes } = require('./utils') | ||
| const { getCSS, getHashes, isOverV2 } = require('./utils') | ||
@@ -102,4 +102,7 @@ const KEY = '__jest-styled-components__' | ||
| let classNames = [...getClassNames(nodes)] | ||
| classNames = filterClassNames(classNames, hashes) | ||
| if (isOverV2()) { | ||
| classNames = filterClassNames(classNames, hashes) | ||
| } | ||
| const style = getStyle(classNames) | ||
@@ -106,0 +109,0 @@ const code = print(val) |
@@ -60,2 +60,3 @@ const css = require('css') | ||
| module.exports = { | ||
| isOverV2, | ||
| resetStyleSheet, | ||
@@ -62,0 +63,0 @@ getCSS, |
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
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by3.43%
362
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-1.93%
25767
- Dev dependency count
- increased by12.5%
27
- Lines of code
- decreased by-12.99%
288