fix: incorrect negated assertion for rule existence check (#345)

Co-authored-by: Evan Jacobs <[email protected]>

Author: noahnu

src/native/toHaveStyleRule.js

@@ -12,9 +12,9 @@ function toHaveStyleRule(component, property, expected) {
    * Merge all styles into one final style object and search for the desired
    * stylename against this object
    */
-  const mergedStyles = styles.reduce((acc, item) => Object.assign({}, acc, item), {});
+  const mergedStyles = styles.reduce((acc, item) => (Object.assign({}, acc, item)), {});
   const received = mergedStyles[camelCasedProperty];
-  const pass = !received && !expected && this.isNot ? false : matcherTest(received, expected);
+  const pass = matcherTest(received, expected, this.isNot);
 
   return {
     pass,

src/toHaveStyleRule.js

@@ -125,7 +125,7 @@ function toHaveStyleRule(component, property, expected, options = {}) {
   const declarations = getDeclarations(rules, property);
   const declaration = declarations.pop() || {};
   const received = declaration.value;
-  const pass = !received && !expected && this.isNot ? false : matcherTest(received, expected);
+  const pass = matcherTest(received, expected, this.isNot);
 
   return {
     pass,

src/utils.js

@@ -59,7 +59,12 @@ const buildReturnMessage = (utils, pass, property, received, expected) => () =>
   'Received:\n' +
   `  ${utils.printReceived(`${property}: ${received}`)}`;
 
-const matcherTest = (received, expected) => {
+const matcherTest = (received, expected, isNot) => {
+  // when negating, assert on existence of the style, rather than the value
+  if (isNot && expected === undefined) {
+      return received !== undefined;
+  }
+
   try {
     const matcher = expected instanceof RegExp ? expect.stringMatching(expected) : expected;
 

test/native/toHaveStyleRule.spec.js

@@ -80,6 +80,18 @@ it('negated ".not" modifier with value', () => {
   expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule('padding', undefined);
 });
 
+it('negated ".not" modifier fails when rule present with no value being asserted', () => {
+  const Button = styled.Text`
+    background-color: blue;
+  `;
+
+  expect(renderer.create(<Button />).toJSON()).toHaveStyleRule('background-color', 'blue');
+  expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule('opacity');
+  expect(() => {
+    expect(renderer.create(<Button />).toJSON()).not.toHaveStyleRule('background-color');
+  }).toThrowError();
+});
+
 it('jest asymmetric matchers', () => {
   const Button = styled.Text`
     background-color: ${({ transparent }) => (transparent ? 'transparent' : 'papayawhip')};

test/toHaveStyleRule.spec.js

@@ -130,11 +130,24 @@ it('negated ".not" modifier with value', () => {
     opacity: 0.65;
   `;
 
-  notToHaveStyleRule(<Button />, 'opacity', '0.50');
-  notToHaveStyleRule(<Button />, 'opacity', '');
-  notToHaveStyleRule(<Button />, 'opacity', null);
-  notToHaveStyleRule(<Button />, 'opacity', false);
-  notToHaveStyleRule(<Button />, 'opacity', undefined);
+  notToHaveStyleRule(<Button />, "opacity", "0.50");
+  notToHaveStyleRule(<Button />, "opacity", "");
+  notToHaveStyleRule(<Button />, "opacity", null);
+  notToHaveStyleRule(<Button />, "opacity", false);
+  expect(() => {
+    toHaveStyleRule(<Button />, "opacity", undefined);
+  }).toThrowError();
+});
+
+it('negated ".not" modifier fails when rule present with no value being asserted', () => {
+  const Button = styled.button`
+    opacity: 0.65;
+  `;
+
+  toHaveStyleRule(<Button />, "opacity", "0.65");
+  expect(() => {
+    notToHaveStyleRule(<Button />, "opacity");
+  }).toThrowError();
 });
 
 it('jest asymmetric matchers', () => {