diff --git a/docs/.vitepress/style/vars.css b/docs/.vitepress/style/vars.css index 15a6cf6ab0fd..8463e9257cdc 100644 --- a/docs/.vitepress/style/vars.css +++ b/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; } /** diff --git a/docs/guide/snapshot.md b/docs/guide/snapshot.md index 6daf3981ba27..6765d7160a17 100644 --- a/docs/guide/snapshot.md +++ b/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 + } + } +}) +```