chore: Jest snapshot pluging for strip ansi (#1455)

Author: mdjastrzebski

jest-setup.ts

@@ -5,6 +5,3 @@ jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 beforeEach(() => {
   resetToDefaults();
 });
-
-// Disable colors in our local tests in order to generate clear snapshots
-process.env.COLORS = 'false';

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: './jest-preset',
+  setupFilesAfterEnv: ['./jest-setup.ts'],
+  testPathIgnorePatterns: [
+    'timerUtils',
+    'examples/',
+    'experiments-app/',
+    'experiments-rtl/',
+  ],
+  testTimeout: 60000,
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@react-native|react-native)/).*/',
+  ],
+  snapshotSerializers: ['@relmify/jest-serializer-strip-ansi/always'],
+  clearMocks: true,
+};

package.json

@@ -41,6 +41,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@callstack/eslint-config": "^13.0.1",
+    "@relmify/jest-serializer-strip-ansi": "^1.0.2",
     "@testing-library/jest-native": "^5.4.0",
     "@types/jest": "^29.2.3",
     "@types/react": "^18.2.15",
@@ -88,22 +89,5 @@
     "build:ts:watch": "yarn build:ts --watch --preserveWatchOutput",
     "build": "yarn clean && yarn build:js && yarn build:ts && yarn copy-flowtypes",
     "prepare": "yarn build"
-  },
-  "jest": {
-    "preset": "./jest-preset",
-    "setupFilesAfterEnv": [
-      "./jest-setup.ts"
-    ],
-    "testPathIgnorePatterns": [
-      "timerUtils",
-      "examples/",
-      "experiments-app/",
-      "experiments-rtl/"
-    ],
-    "testTimeout": 60000,
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(@react-native|react-native)/).*/"
-    ],
-    "clearMocks": true
   }
 }

src/helpers/format.ts

@@ -16,7 +16,7 @@ const format = (
 ) =>
   prettyFormat(input, {
     plugins: [getCustomPlugin(options.mapProps), plugins.ReactElement],
-    highlight: shouldHighlight(),
+    highlight: true,
     printBasicPrototype: false,
   });
 
@@ -40,8 +40,4 @@ const getCustomPlugin = (mapProps?: MapPropsFunction): NewPlugin => {
   };
 };
 
-function shouldHighlight() {
-  return process?.env?.COLORS !== 'false';
-}
-
 export default format;

src/queries/__tests__/text.test.tsx

@@ -516,38 +516,38 @@ test('error message renders the element tree, preserving only helpful props', as
   const view = render(<View accessibilityViewIsModal key="this is filtered" />);
 
   expect(() => view.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with text: /foo/
+    "Unable to find an element with text: /foo/
 
-      <View
-        accessibilityViewIsModal={true}
-      />"
-    `);
+    <View
+      accessibilityViewIsModal={true}
+    />"
+  `);
 
   expect(() => view.getAllByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with text: /foo/
+    "Unable to find an element with text: /foo/
 
-      <View
-        accessibilityViewIsModal={true}
-      />"
-    `);
+    <View
+      accessibilityViewIsModal={true}
+    />"
+  `);
 
   await expect(view.findByText(/foo/)).rejects
     .toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with text: /foo/
+    "Unable to find an element with text: /foo/
 
-      <View
-        accessibilityViewIsModal={true}
-      />"
-    `);
+    <View
+      accessibilityViewIsModal={true}
+    />"
+  `);
 
   await expect(view.findAllByText(/foo/)).rejects
     .toThrowErrorMatchingInlineSnapshot(`
-      "Unable to find an element with text: /foo/
+    "Unable to find an element with text: /foo/
 
-      <View
-        accessibilityViewIsModal={true}
-      />"
-    `);
+    <View
+      accessibilityViewIsModal={true}
+    />"
+  `);
 });
 
 test('byText should return host component', () => {

yarn.lock

@@ -1791,6 +1791,11 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
+"@relmify/jest-serializer-strip-ansi@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@relmify/jest-serializer-strip-ansi/-/jest-serializer-strip-ansi-1.0.2.tgz#97f1cda5046f652bdf8ba7f8669df44b5f9187f7"
+  integrity sha512-cJv6weXt7Bk0PEpWNtw0UGOddIbEvNLPlbYb+594xxe5WXs3SSA29tCK57Vg6q46wHEpY1kOCmgQhE8EcIXPKw==
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"