test(jest): opt-in to shorter snapshot format

jest.config.js

@@ -25,7 +25,9 @@ module.exports = {
   globals: {
     __DEV__: true,
   },
-
+  snapshotFormat: {
+    printBasicPrototype: false,
+  },
   // reporter for circleci
   reporters: [
     'default',

package.json

@@ -80,8 +80,7 @@
     "@testing-library/preact": "1.0.2",
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.1.15",
-    "@types/jest": "^26.0.22",
-    "@types/jest-diff": "^24.3.0",
+    "@types/jest": "^27.0.1",
     "@types/jsdom": "^16.2.13",
     "@types/scriptjs": "^0.0.2",
     "@types/storybook__addon-actions": "^3.4.2",
@@ -98,7 +97,7 @@
     "algoliasearch": "4.10.3",
     "algoliasearch-v3": "npm:[email protected]",
     "babel-eslint": "10.0.3",
-    "babel-jest": "26.6.3",
+    "babel-jest": "27.1.0",
     "babel-loader": "8.0.6",
     "babel-plugin-inline-replace-variables": "1.3.1",
     "babel-plugin-polyfill-es-shims": "0.0.7",
@@ -120,12 +119,12 @@
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "2.3.0",
     "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#1.3.0",
-    "jest": "26.6.3",
-    "jest-diff": "26.6.2",
-    "jest-environment-jsdom": "26.6.2",
+    "jest": "27.1.0",
+    "jest-diff": "27.1.0",
+    "jest-environment-jsdom": "27.1.0",
     "jest-environment-jsdom-global": "2.0.4",
     "jest-junit": "12.2.0",
-    "jest-watch-typeahead": "0.6.2",
+    "jest-watch-typeahead": "0.6.4",
     "jscodeshift": "0.7.0",
     "jsdom-global": "3.0.2",
     "places.js": "1.17.1",

scripts/jest/matchers/toWarnDev.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import jestDiff from 'jest-diff';
+import { diff } from 'jest-diff';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -56,7 +56,7 @@ const matcher: jest.ExpectExtendMap = {
 
 Difference:
 
-${jestDiff(expectedMessage, actualWarning)}`,
+${diff(expectedMessage, actualWarning)}`,
       };
     }
 

src/__tests__/index-es-test.ts

@@ -31,7 +31,7 @@ describe('instantsearch()', () => {
 
   it('includes the helper functions', () => {
     expect(Object.keys(instantsearch)).toMatchInlineSnapshot(`
-      Array [
+      [
         "version",
         "createInfiniteHitsSessionStorageCache",
         "highlight",

src/__tests__/index-test.ts

@@ -21,7 +21,7 @@ describe('instantsearch()', () => {
 
   it('includes the API and the helper functions', () => {
     expect(Object.keys(instantsearch)).toMatchInlineSnapshot(`
-      Array [
+      [
         "version",
         "connectors",
         "widgets",

src/components/ClearRefinements/__tests__/__snapshots__/ClearRefinements-test.tsx.snap

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClearRefinements should render <ClearRefinements /> 1`] = `
-Array [
+[
   <div
     className="root"
   >
-    Array [
+    [
       <button
         className="button"
         dangerouslySetInnerHTML={
-          Object {
+          {
             "__html": "",
           }
         }
@@ -22,15 +22,15 @@ Array [
 `;
 
 exports[`ClearRefinements should render <ClearRefinements /> with a specific class when no refinements 1`] = `
-Array [
+[
   <div
     className="root"
   >
-    Array [
+    [
       <button
         className="button disabled"
         dangerouslySetInnerHTML={
-          Object {
+          {
             "__html": "",
           }
         }

src/components/Hits/__tests__/__snapshots__/Hits-test.tsx.snap

@@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Hits markup should render <Hits /> 1`] = `
-Array [
+[
   <div
     className="root"
   >
     <ol
       className="list"
     >
-      Array [
+      [
         <li
           className="item"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "item",
             }
           }
         />,
       ]
-      Array [
+      [
         <li
           className="item"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "item",
             }
           }
@@ -34,28 +34,28 @@ Array [
 `;
 
 exports[`Hits markup should render <Hits /> without highlight function 1`] = `
-Array [
+[
   <div
     className="root"
   >
     <ol
       className="list"
     >
-      Array [
+      [
         <li
           className="item"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "<mark class=\\"ais-Highlight-highlighted\\">name 1</mark>",
             }
           }
         />,
       ]
-      Array [
+      [
         <li
           className="item"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "<mark class=\\"ais-Highlight-highlighted\\">name 2</mark>",
             }
           }

src/components/MenuSelect/__tests__/__snapshots__/MenuSelect-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MenuSelect should render <MenuSelect /> with custom templates 1`] = `
-Array [
+[
   <div
     className="root"
   >
@@ -10,33 +10,33 @@ Array [
       onChange={[Function]}
       value=""
     >
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "defaultOption",
             }
           }
           value=""
         />,
       ]
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "foo",
             }
           }
           value="foo"
         />,
       ]
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "bar",
             }
           }
@@ -49,7 +49,7 @@ Array [
 `;
 
 exports[`MenuSelect should render <MenuSelect /> with items 1`] = `
-Array [
+[
   <div
     className="root"
   >
@@ -58,33 +58,33 @@ Array [
       onChange={[Function]}
       value=""
     >
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "See all",
             }
           }
           value=""
         />,
       ]
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "foo ()",
             }
           }
           value="foo"
         />,
       ]
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "bar ()",
             }
           }
@@ -97,7 +97,7 @@ Array [
 `;
 
 exports[`MenuSelect should render <MenuSelect /> with no items 1`] = `
-Array [
+[
   <div
     className="root noRefinementRoot"
   >
@@ -106,11 +106,11 @@ Array [
       onChange={[Function]}
       value=""
     >
-      Array [
+      [
         <option
           className="option"
           dangerouslySetInnerHTML={
-            Object {
+            {
               "__html": "See all",
             }
           }