jest-styled-components - npm Package Compare versions

Comparing version 7.0.0-beta.1 to 7.0.0-beta.2

package.json

 {
   "name": "jest-styled-components",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.2",
   "description": "Jest utilities for Styled Components",
@@ -30,3 +30,3 @@ "main": "./src/index.js",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^9.3.2",
     "babel-core": "^7.0.0-bridge.0",
@@ -36,10 +36,10 @@ "babel-eslint": "^10.0.1",
     "enzyme": "^3.6.0",
-    "enzyme-adapter-preact-pure": "^1.13.4",
+    "enzyme-adapter-preact-pure": "^2.2.0",
     "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.3.1",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "husky": "^2.4.0",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "husky": "^3.0.9",
     "jest": "^24.8.0",
-    "lint-staged": "^8.2.0",
+    "lint-staged": "^9.4.2",
     "preact": "^10.0.0-beta.2",
@@ -51,5 +51,5 @@ "preact-render-to-json": "^3.6.6",
     "react-is": "^16.8.6",
-    "react-native": "^0.59.9",
+    "react-native": "^0.61.4",
     "react-test-renderer": "^16.8.0",
-    "styled-components": "beta",
+    "styled-components": "5.0.0-rc.1",
     "typescript": "^3.0.3"
@@ -56,0 +56,0 @@ },

README.md

@@ -39,2 +39,4 @@ [![NPM version](https://img.shields.io/npm/v/jest-styled-components.svg)](https://www.npmjs.com/package/jest-styled-components)
 
+If you don't want to import the library in every test file, it's recommended to use the [global installation](#global-installation) method.
+
 Table of Contents
@@ -226,6 +228,6 @@ =================
 
-To generate snapshots with [react-testing-library](https://github.com/kentcdodds/react-testing-library), you can follow the example below:
+To generate snapshots with [react-testing-library](https://github.com/testing-library/react-testing-library), you can follow the example below:
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
@@ -381,3 +383,3 @@ test('it works', () => {
 
-The matcher supports an optional third `options` parameter which makes it possible to search for rules nested within an [At-rule](https://developer.mozilla.org/en/docs/Web/CSS/At-rule) ([media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)) or to add modifiers to the class selector. This feature is supported in React only, and more options are coming soon.
+The matcher supports an optional third `options` parameter which makes it possible to search for rules nested within an [At-rule](https://developer.mozilla.org/en/docs/Web/CSS/At-rule) (see [media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) and [supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)) or to add modifiers to the class selector. This feature is supported in React only, and more options are coming soon.
 
@@ -440,7 +442,7 @@ ```js
 
-It is possibile to setup this package for all the tests using the [setupTestFrameworkScriptFile](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) option:
+It is possible to setup this package for all the tests using the [setupFilesAfterEnv](https://jestjs.io/docs/en/configuration#setupfilesafterenv-array) option:
 
 ```js
 "jest": {
-  "setupTestFrameworkScriptFile": "./setupTest.js"
+  "setupFilesAfterEnv": ["./setupTest.js"]
 }
@@ -447,0 +449,0 @@ ```

src/toHaveStyleRule.js

@@ -1,6 +0,8 @@
-const { getCSS, matcherTest, buildReturnMessage } = require('./utils');
+const { getCSS, matcherTest, buildReturnMessage } = require("./utils");
 
-const shouldDive = node => typeof node.dive === 'function' && typeof node.type() !== 'string';
+const shouldDive = node =>
+  typeof node.dive === "function" && typeof node.type() !== "string";
 
-const isTagWithClassName = node => node.exists() && node.prop('className') && typeof node.type() === 'string';
+const isTagWithClassName = node =>
+  node.exists() && node.prop("className") && typeof node.type() === "string";
 
@@ -11,12 +13,12 @@ const getClassNames = received => {
   if (received) {
-    if (received.$$typeof === Symbol.for('react.test.json')) {
+    if (received.$$typeof === Symbol.for("react.test.json")) {
       className = received.props.className || received.props.class;
-    } else if (typeof received.exists === 'function' && received.exists()) {
+    } else if (typeof received.exists === "function" && received.exists()) {
       const tree = shouldDive(received) ? received.dive() : received;
       const components = tree.findWhere(isTagWithClassName);
       if (components.length) {
-        className = components.first().prop('className');
+        className = components.first().prop("className");
       }
     } else if (global.Element && received instanceof global.Element) {
-      className = Array.from(received.classList).join(' ');
+      className = Array.from(received.classList).join(" ");
     }
@@ -28,3 +30,4 @@ }
 
-const hasAtRule = options => Object.keys(options).some(option => ['media', 'supports'].includes(option));
+const hasAtRule = options =>
+  Object.keys(options).some(option => ["media", "supports"].includes(option));
 
@@ -37,3 +40,7 @@ const getAtRules = (ast, options) => {
       ast.stylesheet.rules
-        .filter(rule => rule.type === option && rule[option] === options[option].replace(mediaRegex, '$1$2'))
+        .filter(
+          rule =>
+            rule.type === option &&
+            rule[option] === options[option].replace(mediaRegex, "$1$2")
+        )
         .map(rule => rule.rules)
@@ -45,9 +52,12 @@ .reduce((acc, rules) => acc.concat(rules), [])
 
-const getModifiedClassName = (className, modifier = '') => {
+const getModifiedClassName = (className, staticClassName, modifier = "") => {
   const classNameSelector = `.${className}`;
-  let prefix = '';
+  let prefix = "";
 
   modifier = modifier.trim();
-  if (modifier.includes('&')) {
-    modifier = modifier.replace(/&/g, classNameSelector);
+  if (modifier.includes("&")) {
+    modifier = modifier
+      // & combined with other selectors and not a precedence boost should be replaced with the static className, but the first instance should be the dynamic className
+      .replace(/(&[^&]+?)&/g, `$1.${staticClassName}`)
+      .replace(/&/g, classNameSelector);
   } else {
@@ -57,4 +67,4 @@ prefix += classNameSelector;
   const first = modifier[0];
-  if (first !== ':' && first !== '[') {
-    prefix += ' ';
+  if (first !== ":" && first !== "[") {
+    prefix += " ";
   }
@@ -65,9 +75,27 @@
 
-const hasClassNames = (classNames, selectors, options) =>
-  classNames.some(className => selectors.includes(getModifiedClassName(className, options.modifier)));
+const hasClassNames = (classNames, selectors, options) => {
+  const staticClassNames = classNames.filter(x => x.startsWith("sc-"));
 
+  return classNames.some(className =>
+    staticClassNames.some(staticClassName =>
+      selectors.includes(
+        getModifiedClassName(
+          className,
+          staticClassName,
+          options.modifier
+        ).replace(/['"]/g, '"')
+      )
+    )
+  );
+};
+
 const getRules = (ast, classNames, options) => {
-  const rules = hasAtRule(options) ? getAtRules(ast, options) : ast.stylesheet.rules;
+  const rules = hasAtRule(options)
+    ? getAtRules(ast, options)
+    : ast.stylesheet.rules;
 
-  return rules.filter(rule => rule.type === 'rule' && hasClassNames(classNames, rule.selectors, options));
+  return rules.filter(
+    rule =>
+      rule.type === "rule" && hasClassNames(classNames, rule.selectors, options)
+  );
 };
@@ -79,4 +107,6 @@
     `No style rules found on passed Component${
-      Object.keys(options).length ? ` using options:\n${JSON.stringify(options)}` : ''
-    }`,
+      Object.keys(options).length
+        ? ` using options:\n${JSON.stringify(options)}`
+        : ""
+    }`
 });
@@ -86,6 +116,10 @@
   rule.declarations
-    .filter(declaration => declaration.type === 'declaration' && declaration.property === property)
+    .filter(
+      declaration =>
+        declaration.type === "declaration" && declaration.property === property
+    )
     .pop();
 
-const getDeclarations = (rules, property) => rules.map(rule => getDeclaration(rule, property)).filter(Boolean);
+const getDeclarations = (rules, property) =>
+  rules.map(rule => getDeclaration(rule, property)).filter(Boolean);
 
@@ -95,3 +129,5 @@ const normalizeOptions = options =>
     ? Object.assign({}, options, {
-        modifier: Array.isArray(options.modifier) ? options.modifier.join('') : options.modifier,
+        modifier: Array.isArray(options.modifier)
+          ? options.modifier.join("")
+          : options.modifier
       })
@@ -113,7 +149,10 @@ : options;
   const received = declaration.value;
-  const pass = !received && !expected && this.isNot ? false : matcherTest(received, expected);
+  const pass =
+    !received && !expected && this.isNot
+      ? false
+      : matcherTest(received, expected);
 
   return {
     pass,
-    message: buildReturnMessage(this.utils, pass, property, received, expected),
+    message: buildReturnMessage(this.utils, pass, property, received, expected)
   };
@@ -120,0 +159,0 @@ }

typings/index.d.ts

@@ -0,1 +1,3 @@
+import { Plugin, NewPlugin } from 'pretty-format'
+
 declare namespace jest {
@@ -19,1 +21,3 @@ interface AsymmetricMatcher {
 }
+
+export declare const styleSheetSerializer: Exclude<Plugin, NewPlugin>;

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

36918

increased by2.6%

Lines of code

330

increased by13.4%

Number of lines in readme file

462

increased by0.43%

No dependency changes