feat: implement toHaveStyle with tests

Author: marcinkornek

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;"
+`;

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' });
+});

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;
 }
 

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,
 });

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';

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');
+    },
+  };
+}