feat: add mock snapshot serializer (#1717)

* feat: add mock snapshot serializer

* chore: cleanup

packages/vitest/src/integrations/snapshot/port/mockSerializer.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/facebook/jest/blob/4eb4f6a59b6eae0e05b8e51dd8cd3fdca1c7aff1/packages/jest-snapshot/src/mockSerializer.ts#L4
+ */
+
+import type { NewPlugin } from 'pretty-format'
+
+export const serialize: NewPlugin['serialize'] = (
+  val,
+  config,
+  indentation,
+  depth,
+  refs,
+  printer,
+): string => {
+  // Serialize a non-default name, even if config.printFunctionName is false.
+  const name = val.getMockName()
+  const nameString = name === 'vi.fn()' ? '' : ` ${name}`
+
+  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
+       }${indentationNext
+       }"results": ${
+       printer(val.mock.results, config, indentationNext, depth, refs)
+       }${config.min ? '' : ','
+       }${config.spacingOuter
+       }${indentation
+       }}`
+  }
+
+  return `[MockFunction${nameString}]${callsString}`
+}
+
+export const test: NewPlugin['test'] = val => val && !!val._isMockFunction
+
+const plugin: NewPlugin = { serialize, test }
+
+export default plugin

packages/vitest/src/integrations/snapshot/port/plugins.ts

@@ -13,6 +13,8 @@ import {
   plugins as prettyFormatPlugins,
 } from 'pretty-format'
 
+import MockSerializer from './mockSerializer'
+
 const {
   DOMCollection,
   DOMElement,
@@ -29,12 +31,9 @@ let PLUGINS: PrettyFormatPlugins = [
   DOMCollection,
   Immutable,
   AsymmetricMatcher,
-  // TODO: write sinon mock serializer
-  // https://github.com/facebook/jest/blob/4eb4f6a59b6eae0e05b8e51dd8cd3fdca1c7aff1/packages/jest-snapshot/src/mockSerializer.ts#L4
+  MockSerializer,
 ]
 
-// TODO: expose these and allow user to add custom serializers
-// Prepend to list so the last added is the first tested.
 export const addSerializer = (plugin: PrettyFormatPlugin): void => {
   PLUGINS = [plugin].concat(PLUGINS)
 }

test/core/test/__snapshots__/snapshot.test.ts.snap

@@ -26,6 +26,26 @@ exports[`properties snapshot 1`] = `
 }
 `;
 
+exports[`renders mock snapshot 1`] = `[MockFunction spy]`;
+
+exports[`renders mock snapshot 2`] = `
+[MockFunction spy] {
+  "calls": [
+    [
+      "hello",
+      "world",
+      2,
+    ],
+  ],
+  "results": [
+    {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
 exports[`throwing 1`] = `"omega"`;
 
 exports[`throwing 2`] = `"omega"`;

test/core/test/snapshot.test.ts

@@ -1,4 +1,4 @@
-import { expect, test } from 'vitest'
+import { expect, test, vi } from 'vitest'
 import { testOutsideInlineSnapshot } from './snapshots-outside'
 
 test('object', () => {
@@ -82,3 +82,34 @@ test.fails('properties snapshot fails', () => {
     id: expect.any(String),
   })
 })
+
+test('renders mock snapshot', () => {
+  const fn = vi.fn()
+  expect(fn).toMatchSnapshot()
+  fn('hello', 'world', 2)
+  expect(fn).toMatchSnapshot()
+})
+
+test('renders inline mock snapshot', () => {
+  const fn = vi.fn()
+  expect(fn).toMatchInlineSnapshot('[MockFunction spy]')
+  fn('hello', 'world', 2)
+  expect(fn).toMatchInlineSnapshot(`
+    [MockFunction spy] {
+      "calls": [
+        [
+          "hello",
+          "world",
+          2,
+        ],
+      ],
+      "results": [
+        {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  `)
+})
+