docs: snapshot

docs/.vitepress/style/vars.css

@@ -3,13 +3,13 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-c-accent: rgb(218, 180, 11);
-  --vp-c-brand: #6ab02c;
-  --vp-c-brand-light: #9ac440;
-  --vp-c-brand-lighter: #acd05c;
+  --vp-c-accent: #dab40b;
+  --vp-c-brand: #6da13f;
+  --vp-c-brand-light: #7ec242;
+  --vp-c-brand-lighter: #93d31c;
   --vp-c-brand-dark: #668d11;
   --vp-c-brand-darker: #52730d;
-  --vp-c-text-code: #bbeebb;
+  --vp-c-text-code: #5d6f5d;
   --vp-code-block-bg: rgba(125,125,125,0.04);
   --vp-custom-block-tip-text: rgb(18, 181, 157);
   --vp-custom-block-tip-border: rgba(18, 181, 157, 0.5);
@@ -18,6 +18,7 @@
 
 .dark {
   --vp-code-block-bg: rgba(0,0,0,0.2);
+  --vp-c-text-code: #c0cec0;
 }
 
 /**

docs/guide/snapshot.md

@@ -108,3 +108,63 @@ Pretty foo: Object {
 ```
 
 We are using Jest's `pretty-format` for serializing snapshots. You can read more about it here: [pretty-format](https://github.com/facebook/jest/blob/main/packages/pretty-format/README.md#serialize).
+
+## Difference from Jest
+
+Vitest provides an almost compatible Snapshot feature with [Jest's](https://jestjs.io/docs/snapshot-testing) with a few exceptions:
+
+#### 1. Comment header in the snapshot file is different
+
+```diff
+- // Jest Snapshot v1
++ // Vitest Snapshot v1
+```
+
+This does not really affects the functionality but might affect your commit diff when migrating from Jest.
+
+#### 2. `printBasicPrototype` is default to `false`
+
+Both Jest and Vitest's snapshots are powered by [`pretty-format`](https://github.com/facebook/jest/blob/main/packages/pretty-format). In Vitest we set `printBasicPrototype` default to `false` to provide a cleaner snapshot output, while in Jest it's `true` by default.
+
+```ts
+import { expect, test } from 'vitest'
+
+test('snapshot', () => {
+  const bar = [
+    {
+      foo: 'bar',
+    },
+  ]
+
+  // in Jest
+  expect(bar).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "foo": "bar",
+      },
+    ]
+  `)
+
+  // in Vitest
+  expect(bar).toMatchInlineSnapshot(`
+    [
+      {
+        "foo": "bar",
+      },
+    ]
+  `)
+})
+```
+
+We believe this is a more reasonable default for readability and overall DX. If you still prefer Jest's behavior, you can change your config by:
+
+```ts
+// vitest.config.js
+export default defineConfig({
+  test: {
+    snapshotFormat: {
+      printBasicPrototype: true
+    }
+  }
+})
+```