From 4ece01b4cd3b9cd57229f0a001e899bb7f2f538b Mon Sep 17 00:00:00 2001
From: Marcin Kornek <7931279+marcinkornek@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:52:44 +0200
Subject: [PATCH 1/2] feat: implement toHaveStyle with tests

---
 .../__snapshots__/to-have-style.test.tsx.snap |  31 +++++
 src/matchers/__tests__/to-have-style.test.tsx | 111 ++++++++++++++++++
 src/matchers/extend-expect.d.ts               |   1 +
 src/matchers/extend-expect.ts                 |   2 +
 src/matchers/index.tsx                        |   1 +
 src/matchers/to-have-style.tsx                |  79 +++++++++++++
 6 files changed, 225 insertions(+)
 create mode 100644 src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap
 create mode 100644 src/matchers/__tests__/to-have-style.test.tsx
 create mode 100644 src/matchers/to-have-style.tsx

diff --git a/src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap b/src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap
new file mode 100644
index 000000000..0a89f7706
--- /dev/null
+++ b/src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`handles negative test cases 1`] = `
+"expect(element).toHaveStyle()
+
+- Expected
+
+  backgroundColor: blue;
+  transform: [
+    {
+-     "scale": 1
++     "scale": 2
++   },
++   {
++     "rotate": "45deg"
+    }
+  ];"
+`;
+
+exports[`handles transform when transform undefined 1`] = `
+"expect(element).toHaveStyle()
+
+- Expected
+
+- transform: [
+-   {
+-     "scale": 1
+-   }
+- ];
++ transform: undefined;"
+`;
diff --git a/src/matchers/__tests__/to-have-style.test.tsx b/src/matchers/__tests__/to-have-style.test.tsx
new file mode 100644
index 000000000..ee5cd58dc
--- /dev/null
+++ b/src/matchers/__tests__/to-have-style.test.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { render } from '../..';
+import '../extend-expect';
+
+test('handles positive test cases', () => {
+  const styles = StyleSheet.create({
+    container: { borderBottomColor: 'white' },
+  });
+  const { getByTestId } = render(
+    <View
+      testID="container"
+      style={[
+        {
+          backgroundColor: 'blue',
+          height: '40%',
+          transform: [{ scale: 2 }, { rotate: '45deg' }],
+        },
+        [{ height: '100%' }],
+        [[{ width: '50%' }]],
+        styles.container,
+      ]}
+    >
+      <Text>Hello World</Text>
+    </View>
+  );
+
+  const container = getByTestId('container');
+
+  expect(container).toHaveStyle({ backgroundColor: 'blue', height: '100%' });
+  expect(container).toHaveStyle([
+    { backgroundColor: 'blue' },
+    { height: '100%' },
+  ]);
+  expect(container).toHaveStyle({ backgroundColor: 'blue' });
+  expect(container).toHaveStyle({ height: '100%' });
+  expect(container).toHaveStyle({ borderBottomColor: 'white' });
+  expect(container).toHaveStyle({ width: '50%' });
+  expect(container).toHaveStyle([[{ width: '50%' }]]);
+  expect(container).toHaveStyle({
+    transform: [{ scale: 2 }, { rotate: '45deg' }],
+  });
+});
+
+test('handles negative test cases', () => {
+  const { getByTestId } = render(
+    <View
+      testID="container"
+      style={{
+        backgroundColor: 'blue',
+        borderBottomColor: 'black',
+        height: '100%',
+        transform: [{ scale: 2 }, { rotate: '45deg' }],
+      }}
+    >
+      <Text>Hello World</Text>
+    </View>
+  );
+
+  const container = getByTestId('container');
+  expect(() =>
+    expect(container).toHaveStyle({
+      backgroundColor: 'blue',
+      transform: [{ scale: 1 }],
+    })
+  ).toThrowErrorMatchingSnapshot();
+  expect(container).not.toHaveStyle({ fontWeight: 'bold' });
+  expect(container).not.toHaveStyle({ color: 'black' });
+  expect(container).not.toHaveStyle({
+    transform: [{ rotate: '45deg' }, { scale: 2 }],
+  });
+  expect(container).not.toHaveStyle({ transform: [{ rotate: '45deg' }] });
+});
+
+test('handles when the style prop is undefined', () => {
+  const { getByTestId } = render(
+    <View testID="container">
+      <Text>Hello World</Text>
+    </View>
+  );
+
+  const container = getByTestId('container');
+
+  expect(container).not.toHaveStyle({ fontWeight: 'bold' });
+});
+
+test('handles transform when transform undefined', () => {
+  const { getByTestId } = render(
+    <View
+      testID="container"
+      style={{
+        backgroundColor: 'blue',
+        transform: undefined,
+      }}
+    >
+      <Text>Hello World</Text>
+    </View>
+  );
+
+  const container = getByTestId('container');
+  expect(() =>
+    expect(container).toHaveStyle({ transform: [{ scale: 1 }] })
+  ).toThrowErrorMatchingSnapshot();
+});
+
+test('handles Pressable with function style prop', () => {
+  const { getByTestId } = render(
+    <Pressable testID="test" style={() => ({ backgroundColor: 'blue' })} />
+  );
+  expect(getByTestId('test')).toHaveStyle({ backgroundColor: 'blue' });
+});
diff --git a/src/matchers/extend-expect.d.ts b/src/matchers/extend-expect.d.ts
index acdb16d1d..a95174c5a 100644
--- a/src/matchers/extend-expect.d.ts
+++ b/src/matchers/extend-expect.d.ts
@@ -12,6 +12,7 @@ export interface JestNativeMatchers<R> {
   toBeVisible(): R;
   toHaveDisplayValue(expectedValue: TextMatch, options?: TextMatchOptions): R;
   toHaveProp(name: string, expectedValue?: unknown): R;
+  toHaveStyle(style: StyleProp<Style>): R;
   toHaveTextContent(expectedText: TextMatch, options?: TextMatchOptions): R;
 }
 
diff --git a/src/matchers/extend-expect.ts b/src/matchers/extend-expect.ts
index 730e59cbe..abbe613e7 100644
--- a/src/matchers/extend-expect.ts
+++ b/src/matchers/extend-expect.ts
@@ -10,6 +10,7 @@ import { toBeSelected } from './to-be-selected';
 import { toBeVisible } from './to-be-visible';
 import { toHaveDisplayValue } from './to-have-display-value';
 import { toHaveProp } from './to-have-prop';
+import { toHaveStyle } from './to-have-style';
 import { toHaveTextContent } from './to-have-text-content';
 
 expect.extend({
@@ -24,5 +25,6 @@ expect.extend({
   toBeVisible,
   toHaveDisplayValue,
   toHaveProp,
+  toHaveStyle,
   toHaveTextContent,
 });
diff --git a/src/matchers/index.tsx b/src/matchers/index.tsx
index 49014cc2a..d5d2b8eb1 100644
--- a/src/matchers/index.tsx
+++ b/src/matchers/index.tsx
@@ -7,5 +7,6 @@ export { toBePartiallyChecked } from './to-be-partially-checked';
 export { toBeVisible } from './to-be-visible';
 export { toHaveDisplayValue } from './to-have-display-value';
 export { toHaveProp } from './to-have-prop';
+export { toHaveStyle } from './to-have-style';
 export { toHaveTextContent } from './to-have-text-content';
 export { toBeSelected } from './to-be-selected';
diff --git a/src/matchers/to-have-style.tsx b/src/matchers/to-have-style.tsx
new file mode 100644
index 000000000..1d22fa6b0
--- /dev/null
+++ b/src/matchers/to-have-style.tsx
@@ -0,0 +1,79 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint, diff } from 'jest-matcher-utils';
+import {
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import chalk from 'chalk'; // eslint-disable-line import/no-extraneous-dependencies
+import { checkHostElement } from './utils';
+
+export type Style = TextStyle | ViewStyle | ImageStyle;
+type StyleLike = Record<string, unknown>;
+
+function printoutStyles(style: StyleLike) {
+  return Object.keys(style)
+    .sort()
+    .map((prop) =>
+      Array.isArray(style[prop])
+        ? `${prop}: ${JSON.stringify(style[prop], null, 2)};`
+        : `${prop}: ${style[prop]};`
+    )
+    .join('\n');
+}
+
+/**
+ * Narrows down the properties in received to those with counterparts in expected
+ */
+function narrow(expected: StyleLike, received: StyleLike) {
+  return Object.keys(received)
+    .filter((prop) => expected[prop])
+    .reduce(
+      (obj, prop) =>
+        Object.assign(obj, {
+          [prop]: received[prop],
+        }),
+      {}
+    );
+}
+
+// Highlights only style rules that were expected but were not found in the
+// received computed styles
+function expectedDiff(expected: StyleLike, received: StyleLike) {
+  const receivedNarrow = narrow(expected, received);
+
+  const diffOutput = diff(
+    printoutStyles(expected),
+    printoutStyles(receivedNarrow)
+  );
+  // Remove the "+ Received" annotation because this is a one-way diff
+  return diffOutput?.replace(`${chalk.red('+ Received')}\n`, '') ?? '';
+}
+
+export function toHaveStyle(
+  this: jest.MatcherContext,
+  element: ReactTestInstance,
+  style: StyleProp<Style>
+) {
+  checkHostElement(element, toHaveStyle, this);
+
+  const expected = (StyleSheet.flatten(style) ?? {}) as StyleLike;
+  const received = (StyleSheet.flatten(element.props.style) ?? {}) as StyleLike;
+
+  const pass = Object.entries(expected).every(([prop, value]) =>
+    this.equals(received?.[prop], value)
+  );
+
+  return {
+    pass,
+    message: () => {
+      const matcher = `${this.isNot ? '.not' : ''}.toHaveStyle`;
+      return [
+        matcherHint(matcher, 'element', ''),
+        expectedDiff(expected, received),
+      ].join('\n\n');
+    },
+  };
+}

From a0ee8a7787855bb93fdb3fec4fb001fe97514236 Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Tue, 12 Sep 2023 12:00:53 +0200
Subject: [PATCH 2/2] refactor: tweaks and cleanup

---
 package.json                                  |   1 +
 .../__snapshots__/to-have-style.test.tsx.snap |  31 ---
 src/matchers/__tests__/to-have-style.test.tsx | 182 ++++++++++++------
 src/matchers/extend-expect.d.ts               |   2 +
 src/matchers/to-have-style.tsx                | 111 ++++++-----
 5 files changed, 185 insertions(+), 142 deletions(-)
 delete mode 100644 src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap

diff --git a/package.json b/package.json
index c06fd0497..01b78a9db 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "flow": "flow",
     "copy-flowtypes": "cp typings/index.flow.js build",
     "lint": "eslint src --cache",
+    "validate": "yarn lint && yarn typecheck && yarn test",
     "prepublish": "yarn build",
     "build:js": "babel src --out-dir build --extensions \".js,.ts,.jsx,.tsx\" --source-maps --ignore \"**/__tests__/**\"",
     "build:js:watch": "yarn build:js --watch",
diff --git a/src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap b/src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap
deleted file mode 100644
index 0a89f7706..000000000
--- a/src/matchers/__tests__/__snapshots__/to-have-style.test.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`handles negative test cases 1`] = `
-"expect(element).toHaveStyle()
-
-- Expected
-
-  backgroundColor: blue;
-  transform: [
-    {
--     "scale": 1
-+     "scale": 2
-+   },
-+   {
-+     "rotate": "45deg"
-    }
-  ];"
-`;
-
-exports[`handles transform when transform undefined 1`] = `
-"expect(element).toHaveStyle()
-
-- Expected
-
-- transform: [
--   {
--     "scale": 1
--   }
-- ];
-+ transform: undefined;"
-`;
diff --git a/src/matchers/__tests__/to-have-style.test.tsx b/src/matchers/__tests__/to-have-style.test.tsx
index ee5cd58dc..46834cccd 100644
--- a/src/matchers/__tests__/to-have-style.test.tsx
+++ b/src/matchers/__tests__/to-have-style.test.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { StyleSheet, View, Pressable } from 'react-native';
 import { render } from '../..';
 import '../extend-expect';
 
-test('handles positive test cases', () => {
-  const styles = StyleSheet.create({
-    container: { borderBottomColor: 'white' },
-  });
-  const { getByTestId } = render(
+const styles = StyleSheet.create({
+  container: { borderBottomColor: 'white' },
+});
+
+test('toHaveStyle() handles basic cases', () => {
+  const screen = render(
     <View
-      testID="container"
+      testID="view"
       style={[
         {
           backgroundColor: 'blue',
@@ -20,92 +21,155 @@ test('handles positive test cases', () => {
         [[{ width: '50%' }]],
         styles.container,
       ]}
-    >
-      <Text>Hello World</Text>
-    </View>
+    />
   );
 
-  const container = getByTestId('container');
+  const view = screen.getByTestId('view');
+  expect(view).toHaveStyle({ backgroundColor: 'blue' });
+  expect(view).toHaveStyle({ height: '100%' });
+  expect(view).toHaveStyle({ backgroundColor: 'blue', height: '100%' });
+  expect(view).toHaveStyle([{ backgroundColor: 'blue' }, { height: '100%' }]);
+
+  expect(view).toHaveStyle({ borderBottomColor: 'white' });
+  expect(view).toHaveStyle({ width: '50%' });
+  expect(view).toHaveStyle([[{ width: '50%' }]]);
+  expect(view).toHaveStyle({
+    transform: [{ scale: 2 }, { rotate: '45deg' }],
+  });
 
-  expect(container).toHaveStyle({ backgroundColor: 'blue', height: '100%' });
-  expect(container).toHaveStyle([
+  expect(view).not.toHaveStyle({ backgroundColor: 'red' });
+  expect(view).not.toHaveStyle({ height: '50%' });
+  expect(view).not.toHaveStyle({ backgroundColor: 'blue', height: '50%' });
+  expect(view).not.toHaveStyle([
     { backgroundColor: 'blue' },
-    { height: '100%' },
+    { height: '50%' },
   ]);
-  expect(container).toHaveStyle({ backgroundColor: 'blue' });
-  expect(container).toHaveStyle({ height: '100%' });
-  expect(container).toHaveStyle({ borderBottomColor: 'white' });
-  expect(container).toHaveStyle({ width: '50%' });
-  expect(container).toHaveStyle([[{ width: '50%' }]]);
-  expect(container).toHaveStyle({
-    transform: [{ scale: 2 }, { rotate: '45deg' }],
+  expect(view).not.toHaveStyle({
+    transform: [{ scale: 2 }],
+  });
+  expect(view).not.toHaveStyle({
+    transform: [{ rotate: '45deg' }, { scale: 2 }],
   });
 });
 
-test('handles negative test cases', () => {
-  const { getByTestId } = render(
+test('toHaveStyle error messages', () => {
+  const screen = render(
     <View
-      testID="container"
+      testID="view"
       style={{
         backgroundColor: 'blue',
         borderBottomColor: 'black',
         height: '100%',
         transform: [{ scale: 2 }, { rotate: '45deg' }],
       }}
-    >
-      <Text>Hello World</Text>
-    </View>
+    />
   );
 
-  const container = getByTestId('container');
+  const view = screen.getByTestId('view');
+  expect(() => expect(view).toHaveStyle({ backgroundColor: 'red' }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveStyle()
+
+    - Expected
+    + Received
+
+    - backgroundColor: red;
+    + backgroundColor: blue;"
+  `);
+
   expect(() =>
-    expect(container).toHaveStyle({
+    expect(view).toHaveStyle({
       backgroundColor: 'blue',
       transform: [{ scale: 1 }],
     })
-  ).toThrowErrorMatchingSnapshot();
-  expect(container).not.toHaveStyle({ fontWeight: 'bold' });
-  expect(container).not.toHaveStyle({ color: 'black' });
-  expect(container).not.toHaveStyle({
-    transform: [{ rotate: '45deg' }, { scale: 2 }],
-  });
-  expect(container).not.toHaveStyle({ transform: [{ rotate: '45deg' }] });
-});
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveStyle()
 
-test('handles when the style prop is undefined', () => {
-  const { getByTestId } = render(
-    <View testID="container">
-      <Text>Hello World</Text>
-    </View>
-  );
+    - Expected
+    + Received
+
+      backgroundColor: blue;
+      transform: [
+        {
+    -     "scale": 1
+    +     "scale": 2
+    +   },
+    +   {
+    +     "rotate": "45deg"
+        }
+      ];"
+  `);
+
+  expect(() => expect(view).not.toHaveStyle({ backgroundColor: 'blue' }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toHaveStyle()
+
+    Expected element not to have style:
+      backgroundColor: blue;
+    Received:
+      backgroundColor: blue;"
+  `);
+
+  expect(() => expect(view).toHaveStyle({ fontWeight: 'bold' }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveStyle()
+
+    - Expected
+    + Received
+
+    - fontWeight: bold;"
+  `);
 
-  const container = getByTestId('container');
+  expect(() => expect(view).not.toHaveStyle({ backgroundColor: 'blue' }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toHaveStyle()
 
-  expect(container).not.toHaveStyle({ fontWeight: 'bold' });
+    Expected element not to have style:
+      backgroundColor: blue;
+    Received:
+      backgroundColor: blue;"
+  `);
 });
 
-test('handles transform when transform undefined', () => {
-  const { getByTestId } = render(
+test('toHaveStyle() supports missing "style" prop', () => {
+  const screen = render(<View testID="view" />);
+
+  const view = screen.getByTestId('view');
+  expect(view).not.toHaveStyle({ fontWeight: 'bold' });
+});
+
+test('toHaveStyle() supports undefined "transform" style', () => {
+  const screen = render(
     <View
-      testID="container"
+      testID="view"
       style={{
         backgroundColor: 'blue',
         transform: undefined,
       }}
-    >
-      <Text>Hello World</Text>
-    </View>
+    />
   );
 
-  const container = getByTestId('container');
-  expect(() =>
-    expect(container).toHaveStyle({ transform: [{ scale: 1 }] })
-  ).toThrowErrorMatchingSnapshot();
+  const view = screen.getByTestId('view');
+  expect(() => expect(view).toHaveStyle({ transform: [{ scale: 1 }] }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toHaveStyle()
+
+    - Expected
+    + Received
+
+    - transform: [
+    -   {
+    -     "scale": 1
+    -   }
+    - ];
+    + transform: undefined;"
+  `);
 });
 
-test('handles Pressable with function style prop', () => {
-  const { getByTestId } = render(
-    <Pressable testID="test" style={() => ({ backgroundColor: 'blue' })} />
+test('toHaveStyle() supports Pressable with function "style" prop', () => {
+  const screen = render(
+    <Pressable testID="view" style={() => ({ backgroundColor: 'blue' })} />
   );
-  expect(getByTestId('test')).toHaveStyle({ backgroundColor: 'blue' });
+
+  expect(screen.getByTestId('view')).toHaveStyle({ backgroundColor: 'blue' });
 });
diff --git a/src/matchers/extend-expect.d.ts b/src/matchers/extend-expect.d.ts
index a95174c5a..54e02213c 100644
--- a/src/matchers/extend-expect.d.ts
+++ b/src/matchers/extend-expect.d.ts
@@ -1,4 +1,6 @@
+import type { StyleProp } from 'react-native';
 import type { TextMatch, TextMatchOptions } from '../matches';
+import type { Style } from './to-have-style';
 
 export interface JestNativeMatchers<R> {
   toBeOnTheScreen(): R;
diff --git a/src/matchers/to-have-style.tsx b/src/matchers/to-have-style.tsx
index 1d22fa6b0..cd34ba526 100644
--- a/src/matchers/to-have-style.tsx
+++ b/src/matchers/to-have-style.tsx
@@ -1,5 +1,4 @@
 import type { ReactTestInstance } from 'react-test-renderer';
-import { matcherHint, diff } from 'jest-matcher-utils';
 import {
   ImageStyle,
   StyleProp,
@@ -7,50 +6,12 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import chalk from 'chalk'; // eslint-disable-line import/no-extraneous-dependencies
-import { checkHostElement } from './utils';
-
-export type Style = TextStyle | ViewStyle | ImageStyle;
-type StyleLike = Record<string, unknown>;
-
-function printoutStyles(style: StyleLike) {
-  return Object.keys(style)
-    .sort()
-    .map((prop) =>
-      Array.isArray(style[prop])
-        ? `${prop}: ${JSON.stringify(style[prop], null, 2)};`
-        : `${prop}: ${style[prop]};`
-    )
-    .join('\n');
-}
-
-/**
- * Narrows down the properties in received to those with counterparts in expected
- */
-function narrow(expected: StyleLike, received: StyleLike) {
-  return Object.keys(received)
-    .filter((prop) => expected[prop])
-    .reduce(
-      (obj, prop) =>
-        Object.assign(obj, {
-          [prop]: received[prop],
-        }),
-      {}
-    );
-}
+import { matcherHint, diff } from 'jest-matcher-utils';
+import { checkHostElement, formatMessage } from './utils';
 
-// Highlights only style rules that were expected but were not found in the
-// received computed styles
-function expectedDiff(expected: StyleLike, received: StyleLike) {
-  const receivedNarrow = narrow(expected, received);
+export type Style = ViewStyle | TextStyle | ImageStyle;
 
-  const diffOutput = diff(
-    printoutStyles(expected),
-    printoutStyles(receivedNarrow)
-  );
-  // Remove the "+ Received" annotation because this is a one-way diff
-  return diffOutput?.replace(`${chalk.red('+ Received')}\n`, '') ?? '';
-}
+type StyleLike = Record<string, unknown>;
 
 export function toHaveStyle(
   this: jest.MatcherContext,
@@ -59,21 +20,67 @@ export function toHaveStyle(
 ) {
   checkHostElement(element, toHaveStyle, this);
 
-  const expected = (StyleSheet.flatten(style) ?? {}) as StyleLike;
-  const received = (StyleSheet.flatten(element.props.style) ?? {}) as StyleLike;
+  const expected = (StyleSheet.flatten(style) as StyleLike) ?? {};
+  const received = (StyleSheet.flatten(element.props.style) as StyleLike) ?? {};
 
-  const pass = Object.entries(expected).every(([prop, value]) =>
-    this.equals(received?.[prop], value)
+  const pass = Object.keys(expected).every((key) =>
+    this.equals(expected[key], received[key])
   );
 
   return {
     pass,
     message: () => {
-      const matcher = `${this.isNot ? '.not' : ''}.toHaveStyle`;
-      return [
-        matcherHint(matcher, 'element', ''),
-        expectedDiff(expected, received),
-      ].join('\n\n');
+      const to = this.isNot ? 'not to' : 'to';
+      const matcher = matcherHint(
+        `${this.isNot ? '.not' : ''}.toHaveStyle`,
+        'element',
+        ''
+      );
+
+      if (pass) {
+        return formatMessage(
+          matcher,
+          `Expected element ${to} have style`,
+          formatStyles(expected),
+          'Received',
+          formatStyles(pickReceivedStyles(expected, received))
+        );
+      } else {
+        return [matcher, '', expectedDiff(expected, received)].join('\n');
+      }
     },
   };
 }
+
+/**
+ * Generate diff between `expected` and `received` styles.
+ */
+function expectedDiff(expected: StyleLike, received: StyleLike) {
+  const receivedNarrow = pickReceivedStyles(expected, received);
+  return diff(formatStyles(expected), formatStyles(receivedNarrow));
+}
+
+/**
+ * Pick from `received` style only the keys present in `expected` style.
+ */
+function pickReceivedStyles(expected: StyleLike, received: StyleLike) {
+  const result: StyleLike = {};
+  Object.keys(received).forEach((key) => {
+    if (expected[key] !== undefined) {
+      result[key] = received[key];
+    }
+  });
+
+  return result;
+}
+
+function formatStyles(style: StyleLike) {
+  return Object.keys(style)
+    .sort()
+    .map((prop) =>
+      Array.isArray(style[prop])
+        ? `${prop}: ${JSON.stringify(style[prop], null, 2)};`
+        : `${prop}: ${style[prop]};`
+    )
+    .join('\n');
+}