Omit empty calls array in plugin for mock functions (#4848)

* Omit empty calls array in plugin for mock functions

* Replace require with import in test

* Wrap calls in braces

packages/jest-snapshot/src/__tests__/__snapshots__/mock_serializer.test.js.snap

@@ -1,27 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`empty with no calls mock 1`] = `
-MockFunction {
-  "calls": Array [],
-  "name": "jest.fn()",
-}
+exports[`mock with 0 calls and default name 1`] = `[MockFunction]`;
+
+exports[`mock with 0 calls and default name in React element 1`] = `
+<button
+  onClick={[MockFunction]}
+>
+  Mock me!
+</button>
 `;
 
-exports[`instantiated mock 1`] = `
-MockFunction {
-  "calls": Array [
-    Array [
-      Object {
-        "name": "some fine name",
-      },
+exports[`mock with 0 calls and non-default name 1`] = `[MockFunction MyConstructor]`;
+
+exports[`mock with 1 calls and non-default name via new in object 1`] = `
+Object {
+  "fn": [MockFunction MyConstructor] {
+    "calls": Array [
+      Array [
+        Object {
+          "name": "some fine name",
+        },
+      ],
     ],
-  ],
-  "name": "jest.fn()",
+  },
 }
 `;
 
-exports[`mock with calls 1`] = `
-MockFunction {
+exports[`mock with 1 calls in React element 1`] = `
+<button
+  onClick={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          "Mocking you!",
+        ],
+      ],
+    }
+  }
+>
+  Mock me!
+</button>
+`;
+
+exports[`mock with 2 calls 1`] = `
+[MockFunction] {
   "calls": Array [
     Array [],
     Array [
@@ -31,13 +53,5 @@ MockFunction {
       42,
     ],
   ],
-  "name": "jest.fn()",
-}
-`;
-
-exports[`mock with name 1`] = `
-MockFunction {
-  "calls": Array [],
-  "name": "name of mock is nice",
 }
 `;

packages/jest-snapshot/src/__tests__/mock_serializer.test.js

@@ -7,30 +7,132 @@
  */
 'use strict';
 
-const mock = jest.fn();
+import prettyFormat from 'pretty-format';
 
-afterEach(() => mock.mockReset());
+import plugin from '../mock_serializer';
 
-test('empty with no calls mock', () => {
-  expect(mock).toMatchSnapshot();
+test('mock with 0 calls and default name', () => {
+  const fn = jest.fn();
+  expect(fn).toMatchSnapshot();
 });
 
-test('instantiated mock', () => {
+test('mock with 0 calls and default name in React element', () => {
+  const fn = jest.fn();
+  const val = {
+    $$typeof: Symbol.for('react.test.json'),
+    children: ['Mock me!'],
+    props: {
+      onClick: fn,
+    },
+    type: 'button',
+  };
+  expect(val).toMatchSnapshot();
+});
+
+test('mock with 0 calls and non-default name', () => {
+  const fn = jest.fn();
+  fn.mockName('MyConstructor');
+  expect(fn).toMatchSnapshot();
+});
+
+test('mock with 1 calls and non-default name via new in object', () => {
+  const fn = jest.fn();
+  fn.mockName('MyConstructor');
   // eslint-disable-next-line no-new
-  new mock({name: 'some fine name'});
+  new fn({name: 'some fine name'});
+  const val = {
+    fn,
+  };
+  expect(val).toMatchSnapshot();
+});
 
-  expect(mock).toMatchSnapshot();
+test('mock with 1 calls in React element', () => {
+  const fn = jest.fn();
+  fn('Mocking you!');
+  const val = {
+    $$typeof: Symbol.for('react.test.json'),
+    children: ['Mock me!'],
+    props: {
+      onClick: fn,
+    },
+    type: 'button',
+  };
+  expect(val).toMatchSnapshot();
 });
 
-test('mock with calls', () => {
-  mock();
-  mock({foo: 'bar'}, 42);
+test('mock with 2 calls', () => {
+  const fn = jest.fn();
+  fn();
+  fn({foo: 'bar'}, 42);
+  expect(fn).toMatchSnapshot();
+});
 
-  expect(mock).toMatchSnapshot();
+test('indent option', () => {
+  const fn = jest.fn();
+  fn({key: 'value'});
+  const expected = [
+    '[MockFunction] {',
+    '"calls": Array [',
+    'Array [',
+    'Object {',
+    '"key": "value",',
+    '},',
+    '],',
+    '],',
+    '}',
+  ].join('\n');
+  expect(prettyFormat(fn, {indent: 0, plugins: [plugin]})).toBe(expected);
 });
 
-test('mock with name', () => {
-  const mockWithName = jest.fn().mockName('name of mock is nice');
+test('min option', () => {
+  const fn = jest.fn();
+  fn({key: 'value'});
+  const expected = '[MockFunction] {"calls": [[{"key": "value"}]]}';
+  expect(prettyFormat(fn, {min: true, plugins: [plugin]})).toBe(expected);
+});
 
-  expect(mockWithName).toMatchSnapshot();
+test('maxDepth option', () => {
+  const fn1 = jest.fn();
+  fn1.mockName('atDepth1');
+  fn1('primitive', {key: 'value'});
+  const fn2 = jest.fn();
+  fn2.mockName('atDepth2');
+  fn2('primitive', {key: 'value'});
+  const fn3 = jest.fn();
+  fn3.mockName('atDepth3');
+  fn3('primitive', {key: 'value'});
+  const val = {
+    fn1,
+    greaterThan1: {
+      fn2,
+      greaterThan2: {
+        fn3,
+      },
+    },
+  };
+  const expected = [
+    'Object {', // ++depth === 1
+    '  "fn1": [MockFunction atDepth1] {',
+    '    "calls": Array [', // ++depth === 2
+    '      Array [', // ++depth === 3
+    '        "primitive",',
+    '        [Object],', // ++depth === 4
+    '      ],',
+    '    ],',
+    '  },',
+    '  "greaterThan1": Object {', // ++depth === 2
+    '    "fn2": [MockFunction atDepth2] {',
+    '      "calls": Array [', // ++depth === 3
+    '        [Array],', // ++depth === 4
+    '      ],',
+    '    },',
+    '    "greaterThan2": Object {', // ++depth === 3
+    '      "fn3": [MockFunction atDepth3] {',
+    '        "calls": [Array],', // ++depth === 4
+    '      },',
+    '    },',
+    '  },',
+    '}',
+  ].join('\n');
+  expect(prettyFormat(val, {maxDepth: 3, plugins: [plugin]})).toBe(expected);
 });

packages/jest-snapshot/src/mock_serializer.js

@@ -17,26 +17,26 @@ export const serialize = (
   refs: Refs,
   printer: Printer,
 ): string => {
-  const indentationNext = indentation + config.indent;
+  // Serialize a non-default name, even if config.printFunctionName is false.
+  const name = val.getMockName();
+  const nameString = name === 'jest.fn()' ? '' : ' ' + name;
 
-  return (
-    'MockFunction {\n' +
-    `${indentationNext}"calls": ${printer(
-      val.mock.calls,
-      config,
-      indentationNext,
-      depth,
-      refs,
-    )},\n` +
-    `${indentationNext}"name": ${printer(
-      val.getMockName(),
-      config,
-      indentationNext,
-      depth,
-      refs,
-    )},\n` +
-    '}'
-  );
+  let callsString = '';
+  if (val.mock.calls.length !== 0) {
+    const indentationNext = indentation + config.indent;
+    callsString =
+      ' {' +
+      config.spacingOuter +
+      indentationNext +
+      '"calls": ' +
+      printer(val.mock.calls, config, indentationNext, depth, refs) +
+      (config.min ? '' : ',') +
+      config.spacingOuter +
+      indentation +
+      '}';
+  }
+
+  return '[MockFunction' + nameString + ']' + callsString;
 };
 
 export const test = (val: any) => val && !!val._isMockFunction;