From 2e86fbbdceddf5de35bd8508fedc710d6917473e Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.com>
Date: Fri, 30 May 2025 13:27:13 -0500
Subject: [PATCH 1/6] feat(native): add toHaveStyle matcher

---
 packages/native/src/lib/ElementAssertion.ts   |  28 ++++
 packages/native/src/lib/helpers/styles.ts     |   8 +
 packages/native/src/lib/helpers/types.ts      |  19 +++
 .../native/test/lib/ElementAssertion.test.tsx | 147 ++++++++++++++++++
 4 files changed, 202 insertions(+)
 create mode 100644 packages/native/src/lib/helpers/styles.ts
 create mode 100644 packages/native/src/lib/helpers/types.ts

diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts
index 0c858c0..7fa16dd 100644
--- a/packages/native/src/lib/ElementAssertion.ts
+++ b/packages/native/src/lib/ElementAssertion.ts
@@ -3,6 +3,8 @@ import { get } from "dot-prop-immutable";
 import { ReactTestInstance } from "react-test-renderer";
 
 import { instanceToString, isEmpty } from "./helpers/helpers";
+import { getFlattenedStyle } from "./helpers/styles";
+import { AssertiveStyle } from "./helpers/types";
 
 export class ElementAssertion extends Assertion<ReactTestInstance> {
   public constructor(actual: ReactTestInstance) {
@@ -200,6 +202,32 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
   }
 
+  public toHaveStyle(style: AssertiveStyle): this {
+    const stylesOnElement: AssertiveStyle = get(this.actual, "props.style", {});
+
+    const flattenedElementStyle = getFlattenedStyle(stylesOnElement);
+    const flattenedStyle = getFlattenedStyle(style);
+
+    const hasStyle = Object.keys(flattenedStyle)
+                           .every(key => flattenedElementStyle[key] === flattenedStyle[key]);
+
+    const error = new AssertionError({
+      actual: this.actual,
+      message: `Expected element ${this.toString()} to have style ${JSON.stringify(flattenedStyle)}.`,
+    });
+
+    const invertedError = new AssertionError({
+      actual: this.actual,
+      message: `Expected element ${this.toString()} NOT to have style ${JSON.stringify(flattenedStyle)}.`,
+    });
+
+    return this.execute({
+      assertWhen: hasStyle,
+      error,
+      invertedError,
+    });
+  }
+
   private isElementDisabled(element: ReactTestInstance): boolean {
     const { type } = element;
     const elementType = type.toString();
diff --git a/packages/native/src/lib/helpers/styles.ts b/packages/native/src/lib/helpers/styles.ts
new file mode 100644
index 0000000..091983d
--- /dev/null
+++ b/packages/native/src/lib/helpers/styles.ts
@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+
+import { AssertiveStyle, StyleObject } from "./types";
+
+export function getFlattenedStyle(style: AssertiveStyle): StyleObject {
+    const flattenedStyle = StyleSheet.flatten(style);
+    return flattenedStyle ? (flattenedStyle as StyleObject) : {};
+}
diff --git a/packages/native/src/lib/helpers/types.ts b/packages/native/src/lib/helpers/types.ts
new file mode 100644
index 0000000..f2263f9
--- /dev/null
+++ b/packages/native/src/lib/helpers/types.ts
@@ -0,0 +1,19 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+
+/**
+ * Type representing a style that can be applied to a React Native component.
+ * It can be a style for text, view, or image components.
+ */
+export type Style = TextStyle | ViewStyle | ImageStyle;
+
+/**
+ * Type for a style prop that can be applied to a React Native component.
+ * It can be a single style or an array of styles.
+ */
+export type AssertiveStyle = StyleProp<Style>;
+
+/**
+ * Type representing a style object when flattened.
+ * It is a record where the keys are strings and the values can be of any type.
+ */
+export type StyleObject = Record<string, unknown>;
diff --git a/packages/native/test/lib/ElementAssertion.test.tsx b/packages/native/test/lib/ElementAssertion.test.tsx
index 695db7d..0ae51af 100644
--- a/packages/native/test/lib/ElementAssertion.test.tsx
+++ b/packages/native/test/lib/ElementAssertion.test.tsx
@@ -375,4 +375,151 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       });
     });
   });
+
+  describe(".toHaveStyle", () => {
+    context("when the element contains the target style", () => {
+      it("returns the assertion instance", () => {
+      const element = render(
+        <View testID="id" style={{ backgroundColor: "red" }} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.toHaveStyle({ backgroundColor: "red" })).toBe(test);
+      expect(() => test.not.toHaveStyle({ backgroundColor: "red" }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\"}.");
+      });
+    });
+
+    context("when the element does NOT contain the target style", () => {
+      it("throws an error", () => {
+        const element = render(
+        <View testID="id" style={{ opacity: 1 }} />,
+        );
+        const test = new ElementAssertion(element.getByTestId("id"));
+
+        expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
+        expect(() => test.toHaveStyle({ backgroundColor: "red" }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+      });
+    });
+
+    context("when the element contains multiple styles and matches all", () => {
+      it("returns the assertion instance", () => {
+      const element = render(
+        <View testID="id" style={{ backgroundColor: "red", opacity: 0.5 }} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.toHaveStyle({ backgroundColor: "red", opacity: 0.5 })).toBe(test);
+      expect(() => test.not.toHaveStyle({ backgroundColor: "red", opacity: 0.5 }))
+        .toThrowError(AssertionError)
+        .toHaveMessage(
+          "Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.",
+        );
+      });
+    });
+
+    context("when the element contains multiple styles but does not match all", () => {
+      it("throws an error", () => {
+      const element = render(
+        <View testID="id" style={{ backgroundColor: "red", opacity: 1 }} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.not.toHaveStyle({ backgroundColor: "red", opacity: 0.5 })).toBeEqual(test);
+      expect(() => test.toHaveStyle({ backgroundColor: "red", opacity: 0.5 }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.");
+      });
+    });
+
+    context("when the element has no style prop", () => {
+      it("throws an error", () => {
+      const element = render(
+        <View testID="id" />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
+      expect(() => test.toHaveStyle({ backgroundColor: "red" }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+      });
+    });
+
+    context("when the element style is an array and contains the target style", () => {
+      it("returns the assertion instance", () => {
+      const element = render(
+        <View testID="id" style={[{ backgroundColor: "red" }, { opacity: 0.5 }]} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.toHaveStyle({ backgroundColor: "red", opacity: 0.5 })).toBe(test);
+      expect(() => test.not.toHaveStyle({ backgroundColor: "red", opacity: 0.5 }))
+        .toThrowError(AssertionError)
+        .toHaveMessage(
+          "Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.",
+        );
+      });
+    });
+
+    context("when the passed style is an array and contains the target style", () => {
+      it("returns the assertion instance", () => {
+      const element = render(
+        <View testID="id" style={[{ backgroundColor: "red" }, { opacity: 0.5 }]} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+      expect(test.toHaveStyle([{ backgroundColor: "red" }, { opacity: 0.5 }])).toBe(test);
+      expect(() => test.not.toHaveStyle([{ backgroundColor: "red" }, { opacity: 0.5 }]))
+        .toThrowError(AssertionError)
+        .toHaveMessage(
+          "Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.",
+        );
+      });
+    });
+
+    context("when the element style is an array and does not contain the target style", () => {
+      it("throws an error", () => {
+      const element = render(
+        <View testID="id" style={[{ backgroundColor: "blue" }, { opacity: 1 }]} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
+      expect(() => test.toHaveStyle({ backgroundColor: "red" }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+      });
+    });
+
+    context("when the style value is undefined", () => {
+      it("throws an error", () => {
+      const element = render(
+        <View testID="id" style={{ backgroundColor: undefined }} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
+      expect(() => test.toHaveStyle({ backgroundColor: "red" }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+      });
+    });
+
+    context("when the style value is null", () => {
+      it("throws an error", () => {
+      const element = render(
+        <View testID="id" style={null} />,
+      );
+      const test = new ElementAssertion(element.getByTestId("id"));
+
+      expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
+      expect(() => test.toHaveStyle({ backgroundColor: "red" }))
+        .toThrowError(AssertionError)
+        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+      });
+    });
+  });
 });

From e504a05c42b2cbf1783f9a57dec81be32e2a3d92 Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.com>
Date: Mon, 2 Jun 2025 12:23:03 -0500
Subject: [PATCH 2/6] docs(native): add doc comment for toHaveStyle function

---
 packages/native/src/lib/ElementAssertion.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts
index 7fa16dd..bb36744 100644
--- a/packages/native/src/lib/ElementAssertion.ts
+++ b/packages/native/src/lib/ElementAssertion.ts
@@ -202,6 +202,22 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
   }
 
+
+  /**
+   * Asserts that a component has the specified style(s) applied.
+   * 
+   * This method supports both single style objects and arrays of style objects.
+   * It checks if all specified style properties exist and match on the target element.
+   *
+   * @example
+   * ```
+   * expect(element).toHaveStyle({ backgroundColor: "red" });
+   * expect(element).toHaveStyle([{ backgroundColor: "red" }, { opacity: 0.5 }]);
+   * ```
+   *
+   * @param style - A style object or an array of style objects to verify against the element’s computed styles.
+   * @returns the assertion instance
+   */
   public toHaveStyle(style: AssertiveStyle): this {
     const stylesOnElement: AssertiveStyle = get(this.actual, "props.style", {});
 

From 728f1e334a43c30bc0ee126e31d810f4ed0fa07f Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.com>
Date: Mon, 2 Jun 2025 12:29:11 -0500
Subject: [PATCH 3/6] docs(native): fix linting issues

---
 packages/native/src/lib/ElementAssertion.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts
index bb36744..ed7a11d 100644
--- a/packages/native/src/lib/ElementAssertion.ts
+++ b/packages/native/src/lib/ElementAssertion.ts
@@ -202,20 +202,19 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
     });
   }
 
-
   /**
    * Asserts that a component has the specified style(s) applied.
-   * 
+   *
    * This method supports both single style objects and arrays of style objects.
-   * It checks if all specified style properties exist and match on the target element.
+   * It checks if all specified style properties match on the target element.
    *
    * @example
    * ```
    * expect(element).toHaveStyle({ backgroundColor: "red" });
-   * expect(element).toHaveStyle([{ backgroundColor: "red" }, { opacity: 0.5 }]);
+   * expect(element).toHaveStyle([{ backgroundColor: "red" }]);
    * ```
    *
-   * @param style - A style object or an array of style objects to verify against the element’s computed styles.
+   * @param style - A style object to check for.
    * @returns the assertion instance
    */
   public toHaveStyle(style: AssertiveStyle): this {

From 52f0b5ff923dc04091b9487d8b8255067032646e Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.com>
Date: Tue, 2 Sep 2025 12:49:56 -0500
Subject: [PATCH 4/6] refactor(native): remove styles.ts file and merge with
 helpers.ts

---
 packages/native/src/lib/ElementAssertion.ts | 3 +--
 packages/native/src/lib/helpers/helpers.ts  | 9 +++++++++
 packages/native/src/lib/helpers/styles.ts   | 8 --------
 3 files changed, 10 insertions(+), 10 deletions(-)
 delete mode 100644 packages/native/src/lib/helpers/styles.ts

diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts
index ed7a11d..9ce036f 100644
--- a/packages/native/src/lib/ElementAssertion.ts
+++ b/packages/native/src/lib/ElementAssertion.ts
@@ -2,8 +2,7 @@ import { Assertion, AssertionError } from "@assertive-ts/core";
 import { get } from "dot-prop-immutable";
 import { ReactTestInstance } from "react-test-renderer";
 
-import { instanceToString, isEmpty } from "./helpers/helpers";
-import { getFlattenedStyle } from "./helpers/styles";
+import { instanceToString, isEmpty, getFlattenedStyle  } from "./helpers/helpers";
 import { AssertiveStyle } from "./helpers/types";
 
 export class ElementAssertion extends Assertion<ReactTestInstance> {
diff --git a/packages/native/src/lib/helpers/helpers.ts b/packages/native/src/lib/helpers/helpers.ts
index 6ab4db1..03f8fa0 100644
--- a/packages/native/src/lib/helpers/helpers.ts
+++ b/packages/native/src/lib/helpers/helpers.ts
@@ -1,4 +1,7 @@
+import { StyleSheet } from "react-native";
 import { ReactTestInstance } from "react-test-renderer";
+import { AssertiveStyle, StyleObject } from "./types";
+
 
 /**
  * Checks if a value is empty.
@@ -31,3 +34,9 @@ export function instanceToString(instance: ReactTestInstance | null): string {
 
   return `<${instance.type.toString()} ... />`;
 }
+
+
+export function getFlattenedStyle(style: AssertiveStyle): StyleObject {
+    const flattenedStyle = StyleSheet.flatten(style);
+    return flattenedStyle ? (flattenedStyle as StyleObject) : {};
+}
diff --git a/packages/native/src/lib/helpers/styles.ts b/packages/native/src/lib/helpers/styles.ts
deleted file mode 100644
index 091983d..0000000
--- a/packages/native/src/lib/helpers/styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { StyleSheet } from "react-native";
-
-import { AssertiveStyle, StyleObject } from "./types";
-
-export function getFlattenedStyle(style: AssertiveStyle): StyleObject {
-    const flattenedStyle = StyleSheet.flatten(style);
-    return flattenedStyle ? (flattenedStyle as StyleObject) : {};
-}

From 642154464348db183739621bf34c31d212e5a65f Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.com>
Date: Tue, 2 Sep 2025 13:03:18 -0500
Subject: [PATCH 5/6] refactor(native): improve style printing

---
 packages/native/src/lib/ElementAssertion.ts   |  6 +++---
 packages/native/src/lib/helpers/helpers.ts    |  5 +++++
 .../native/test/lib/ElementAssertion.test.tsx | 20 +++++++++----------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts
index 9ce036f..ddec1b9 100644
--- a/packages/native/src/lib/ElementAssertion.ts
+++ b/packages/native/src/lib/ElementAssertion.ts
@@ -2,7 +2,7 @@ import { Assertion, AssertionError } from "@assertive-ts/core";
 import { get } from "dot-prop-immutable";
 import { ReactTestInstance } from "react-test-renderer";
 
-import { instanceToString, isEmpty, getFlattenedStyle  } from "./helpers/helpers";
+import { instanceToString, isEmpty, getFlattenedStyle, styleToString  } from "./helpers/helpers";
 import { AssertiveStyle } from "./helpers/types";
 
 export class ElementAssertion extends Assertion<ReactTestInstance> {
@@ -227,12 +227,12 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
 
     const error = new AssertionError({
       actual: this.actual,
-      message: `Expected element ${this.toString()} to have style ${JSON.stringify(flattenedStyle)}.`,
+      message: `Expected element ${this.toString()} to have style: \n${styleToString(flattenedStyle)}`,
     });
 
     const invertedError = new AssertionError({
       actual: this.actual,
-      message: `Expected element ${this.toString()} NOT to have style ${JSON.stringify(flattenedStyle)}.`,
+      message: `Expected element ${this.toString()} NOT to have style: \n${styleToString(flattenedStyle)}`,
     });
 
     return this.execute({
diff --git a/packages/native/src/lib/helpers/helpers.ts b/packages/native/src/lib/helpers/helpers.ts
index 03f8fa0..f3b2432 100644
--- a/packages/native/src/lib/helpers/helpers.ts
+++ b/packages/native/src/lib/helpers/helpers.ts
@@ -40,3 +40,8 @@ export function getFlattenedStyle(style: AssertiveStyle): StyleObject {
     const flattenedStyle = StyleSheet.flatten(style);
     return flattenedStyle ? (flattenedStyle as StyleObject) : {};
 }
+
+export function styleToString(flattenedStyle: StyleObject): string {
+  const styleEntries = Object.entries(flattenedStyle);
+  return styleEntries.map(([key, value]) => `\t- ${key}: ${value};`).join("\n");
+}
diff --git a/packages/native/test/lib/ElementAssertion.test.tsx b/packages/native/test/lib/ElementAssertion.test.tsx
index 0ae51af..cb359c4 100644
--- a/packages/native/test/lib/ElementAssertion.test.tsx
+++ b/packages/native/test/lib/ElementAssertion.test.tsx
@@ -387,7 +387,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(test.toHaveStyle({ backgroundColor: "red" })).toBe(test);
       expect(() => test.not.toHaveStyle({ backgroundColor: "red" }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\"}.");
+        .toHaveMessage("Expected element <View ... /> NOT to have style: \n\t- backgroundColor: red;");
       });
     });
 
@@ -401,7 +401,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
         expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
         expect(() => test.toHaveStyle({ backgroundColor: "red" }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+        .toHaveMessage("Expected element <View ... /> to have style: \n\t- backgroundColor: red;");
       });
     });
 
@@ -416,7 +416,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(() => test.not.toHaveStyle({ backgroundColor: "red", opacity: 0.5 }))
         .toThrowError(AssertionError)
         .toHaveMessage(
-          "Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.",
+          "Expected element <View ... /> NOT to have style: \n\t- backgroundColor: red;\n\t- opacity: 0.5;",
         );
       });
     });
@@ -431,7 +431,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(test.not.toHaveStyle({ backgroundColor: "red", opacity: 0.5 })).toBeEqual(test);
       expect(() => test.toHaveStyle({ backgroundColor: "red", opacity: 0.5 }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.");
+        .toHaveMessage("Expected element <View ... /> to have style: \n\t- backgroundColor: red;\n\t- opacity: 0.5;");
       });
     });
 
@@ -445,7 +445,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
       expect(() => test.toHaveStyle({ backgroundColor: "red" }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+        .toHaveMessage("Expected element <View ... /> to have style: \n\t- backgroundColor: red;");
       });
     });
 
@@ -460,7 +460,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(() => test.not.toHaveStyle({ backgroundColor: "red", opacity: 0.5 }))
         .toThrowError(AssertionError)
         .toHaveMessage(
-          "Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.",
+          "Expected element <View ... /> NOT to have style: \n\t- backgroundColor: red;\n\t- opacity: 0.5;",
         );
       });
     });
@@ -475,7 +475,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(() => test.not.toHaveStyle([{ backgroundColor: "red" }, { opacity: 0.5 }]))
         .toThrowError(AssertionError)
         .toHaveMessage(
-          "Expected element <View ... /> NOT to have style {\"backgroundColor\":\"red\",\"opacity\":0.5}.",
+          "Expected element <View ... /> NOT to have style: \n\t- backgroundColor: red;\n\t- opacity: 0.5;",
         );
       });
     });
@@ -490,7 +490,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
       expect(() => test.toHaveStyle({ backgroundColor: "red" }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+        .toHaveMessage("Expected element <View ... /> to have style: \n\t- backgroundColor: red;");
       });
     });
 
@@ -504,7 +504,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
       expect(() => test.toHaveStyle({ backgroundColor: "red" }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+        .toHaveMessage("Expected element <View ... /> to have style: \n\t- backgroundColor: red;");
       });
     });
 
@@ -518,7 +518,7 @@ describe("[Unit] ElementAssertion.test.ts", () => {
       expect(test.not.toHaveStyle({ backgroundColor: "red" })).toBeEqual(test);
       expect(() => test.toHaveStyle({ backgroundColor: "red" }))
         .toThrowError(AssertionError)
-        .toHaveMessage("Expected element <View ... /> to have style {\"backgroundColor\":\"red\"}.");
+        .toHaveMessage("Expected element <View ... /> to have style: \n\t- backgroundColor: red;");
       });
     });
   });

From 8ae6c51fec45e72f86a2c599df5fd584e40f0cb2 Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.com>
Date: Tue, 2 Sep 2025 13:07:16 -0500
Subject: [PATCH 6/6] style(native): fix linting issues

---
 packages/native/src/lib/ElementAssertion.ts | 2 +-
 packages/native/src/lib/helpers/helpers.ts  | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts
index ddec1b9..7f2b021 100644
--- a/packages/native/src/lib/ElementAssertion.ts
+++ b/packages/native/src/lib/ElementAssertion.ts
@@ -2,7 +2,7 @@ import { Assertion, AssertionError } from "@assertive-ts/core";
 import { get } from "dot-prop-immutable";
 import { ReactTestInstance } from "react-test-renderer";
 
-import { instanceToString, isEmpty, getFlattenedStyle, styleToString  } from "./helpers/helpers";
+import { instanceToString, isEmpty, getFlattenedStyle, styleToString } from "./helpers/helpers";
 import { AssertiveStyle } from "./helpers/types";
 
 export class ElementAssertion extends Assertion<ReactTestInstance> {
diff --git a/packages/native/src/lib/helpers/helpers.ts b/packages/native/src/lib/helpers/helpers.ts
index f3b2432..69b8411 100644
--- a/packages/native/src/lib/helpers/helpers.ts
+++ b/packages/native/src/lib/helpers/helpers.ts
@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { ReactTestInstance } from "react-test-renderer";
-import { AssertiveStyle, StyleObject } from "./types";
 
+import { AssertiveStyle, StyleObject } from "./types";
 
 /**
  * Checks if a value is empty.
@@ -35,7 +35,6 @@ export function instanceToString(instance: ReactTestInstance | null): string {
   return `<${instance.type.toString()} ... />`;
 }
 
-
 export function getFlattenedStyle(style: AssertiveStyle): StyleObject {
     const flattenedStyle = StyleSheet.flatten(style);
     return flattenedStyle ? (flattenedStyle as StyleObject) : {};
@@ -43,5 +42,5 @@ export function getFlattenedStyle(style: AssertiveStyle): StyleObject {
 
 export function styleToString(flattenedStyle: StyleObject): string {
   const styleEntries = Object.entries(flattenedStyle);
-  return styleEntries.map(([key, value]) => `\t- ${key}: ${value};`).join("\n");
+  return styleEntries.map(([key, value]) => `\t- ${key}: ${String(value)};`).join("\n");
 }