breaking: Migrate codebase to typescript

src/__tests__/__snapshots__/to-have-style.tsx.snap

@@ -6,15 +6,26 @@ exports[`.toHaveStyle handles negative test cases 1`] = `
 - Expected
 
   backgroundColor: blue;
-- transform: [{"scale": 1}];
-+ transform: [{"scale": 2}];"
+  transform: [
+    {
+-     "scale": 1
++     "scale": 2
++   },
++   {
++     "rotate": "45deg"
+    }
+  ];"
 `;
 
 exports[`.toHaveStyle handles transform when transform undefined 1`] = `
 "expect(element).toHaveStyle()
 
 - Expected
 
-- transform: [{"scale": 1}];
+- transform: [
+-   {
+-     "scale": 1
+-   }
+- ];
 + transform: undefined;"
 `;

src/to-have-style.ts

@@ -1,56 +1,48 @@
+import { StyleSheet } from 'react-native';
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
 import { diff } from 'jest-diff';
 import chalk from 'chalk';
-import type { ReactTestInstance } from 'react-test-renderer';
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { checkReactElement, display } from './utils';
+import { checkReactElement } from './utils';
 
 type Style = TextStyle | ViewStyle | ImageStyle;
+type StyleLike = Record<string, unknown>;
 
-const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;
-
-function printoutStyles(style: Style) {
-  return getKeys(style)
+function printoutStyles(style: StyleLike) {
+  return Object.keys(style)
     .sort()
-    .map((prop) => `${prop}: ${display(style[prop])};`)
+    .map((prop) =>
+      Array.isArray(style[prop])
+        ? `${prop}: ${JSON.stringify(style[prop], null, 2)};`
+        : `${prop}: ${style[prop]};`,
+    )
     .join('\n');
 }
 
 /**
- * Recursively narrows down the properties in received to those with counterparts in expected
+ * Narrows down the properties in received to those with counterparts in expected
  */
-function narrow(expected: Style, received: Style) {
-  return getKeys(received)
+function narrow(expected: StyleLike, received: StyleLike) {
+  return Object.keys(received)
     .filter((prop) => expected[prop])
-    .reduce((obj, prop) => {
-      if (Array.isArray(expected[prop]) && Array.isArray(received[prop])) {
-        return Object.assign(obj, {
-          // @ts-ignore not sure how to type it
-          [prop]: expected[prop]?.map((_, i) =>
-            // @ts-ignore not sure how to type it
-            narrow(expected[prop][i], received[prop][i]),
-          ),
-        });
-      }
-
-      return Object.assign(obj, {
-        [prop]: received[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: Style, received: Style) {
+function expectedDiff(expected: StyleLike, received: StyleLike) {
   const receivedNarrow = narrow(expected, received);
 
   const diffOutput = diff(printoutStyles(expected), printoutStyles(receivedNarrow));
-
-  // TODO: What's this case?
-  if (diffOutput == null) return '';
   // Remove the "+ Received" annotation because this is a one-way diff
-  return diffOutput.replace(`${chalk.red('+ Received')}\n`, '');
+  return diffOutput?.replace(`${chalk.red('+ Received')}\n`, '') ?? '';
 }
 
 export function toHaveStyle(
@@ -60,13 +52,11 @@ export function toHaveStyle(
 ) {
   checkReactElement(element, toHaveStyle, this);
 
-  const expected = StyleSheet.flatten(style);
-  const received = StyleSheet.flatten(element.props.style);
+  const expected = StyleSheet.flatten(style) as StyleLike;
+  const received = StyleSheet.flatten(element.props.style) as StyleLike;
 
   return {
-    pass: Object.entries(expected).every(([prop, value]) =>
-      this.equals(received?.[prop as keyof typeof received], value),
-    ),
+    pass: Object.entries(expected).every(([prop, value]) => this.equals(received?.[prop], value)),
     message: () => {
       const matcher = `${this.isNot ? '.not' : ''}.toHaveStyle`;
       return [matcherHint(matcher, 'element', ''), expectedDiff(expected, received)].join('\n\n');