From 1ddf3b3abfafc058a19deb24227feec1409e1310 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Tue, 28 Dec 2021 23:02:53 +0100
Subject: [PATCH] feat: text snapshots, closes #9

---
 .../demo/src/__snapshots__/vue.spec.ts.snap   |  17 +++
 examples/demo/src/vue.spec.ts                 |   7 +-
 examples/vue3/src/Hello.spec.ts               |   4 +-
 .../vue3/src/__snapshots__/Hello.spec.ts.snap |  10 ++
 packages/peeky-cli/src/bin.ts                 |   1 +
 packages/peeky-cli/src/commands/run.ts        |   3 +
 packages/peeky-client/src/apollo.ts           |   1 +
 .../peeky-client/src/features/BaseTab.vue     |   2 +-
 .../src/features/editor/CodeEditor.vue        |  73 +++++++++++
 .../DiffEditor.vue}                           |   8 +-
 .../src/features/snapshot/SnapshotItem.vue    |  33 +++++
 .../src/features/snapshot/SnapshotView.vue    | 117 +++++++++++++++++
 .../src/features/test-file/TestFileItem.vue   |   1 +
 .../src/features/test/TestResult.vue          |   4 +-
 .../src/features/test/TestSnapshots.vue       | 123 ++++++++++++++++++
 .../src/features/test/TestView.vue            |  34 ++++-
 packages/peeky-client/src/router.ts           |   5 +
 packages/peeky-runner/package.json            |   4 +
 packages/peeky-runner/src/index.ts            |   1 +
 packages/peeky-runner/src/message.ts          |   4 +-
 .../src/reporters/console-fancy.ts            |  39 +++++-
 packages/peeky-runner/src/run-all.ts          |  13 +-
 packages/peeky-runner/src/runner.ts           |   3 +-
 .../peeky-runner/src/runtime/run-test-file.ts |  22 +++-
 .../peeky-runner/src/runtime/run-tests.ts     |  15 ++-
 .../peeky-runner/src/runtime/test-register.ts |   2 +
 packages/peeky-runner/src/snapshot/format.ts  |  31 +++++
 packages/peeky-runner/src/snapshot/index.ts   |   3 +
 packages/peeky-runner/src/snapshot/matcher.ts | 106 +++++++++++++++
 .../peeky-runner/src/snapshot/plugins/html.ts |  23 ++++
 packages/peeky-runner/src/snapshot/read.ts    |  28 ++++
 packages/peeky-runner/src/snapshot/types.ts   |   9 ++
 packages/peeky-runner/src/snapshot/util.ts    |  19 +++
 packages/peeky-runner/src/snapshot/version.ts |   1 +
 packages/peeky-runner/src/snapshot/write.ts   |  34 +++++
 packages/peeky-runner/src/stats.ts            |  11 ++
 packages/peeky-runner/src/types.ts            |  15 +++
 .../src/generated/nexus-typegen.ts            |  49 +++++++
 .../peeky-server/src/generated/schema.graphql |  21 +++
 packages/peeky-server/src/schema/Run.ts       |  38 ++++++
 packages/peeky-server/src/schema/Snapshot.ts  | 108 +++++++++++++++
 packages/peeky-server/src/schema/Test.ts      |   5 +
 packages/peeky-server/src/schema/index.ts     |   1 +
 pnpm-lock.yaml                                |  69 +++++++++-
 44 files changed, 1095 insertions(+), 22 deletions(-)
 create mode 100644 examples/demo/src/__snapshots__/vue.spec.ts.snap
 create mode 100644 examples/vue3/src/__snapshots__/Hello.spec.ts.snap
 create mode 100644 packages/peeky-client/src/features/editor/CodeEditor.vue
 rename packages/peeky-client/src/features/{test/TestAssertionDiff.vue => editor/DiffEditor.vue} (80%)
 create mode 100644 packages/peeky-client/src/features/snapshot/SnapshotItem.vue
 create mode 100644 packages/peeky-client/src/features/snapshot/SnapshotView.vue
 create mode 100644 packages/peeky-client/src/features/test/TestSnapshots.vue
 create mode 100644 packages/peeky-runner/src/snapshot/format.ts
 create mode 100644 packages/peeky-runner/src/snapshot/index.ts
 create mode 100644 packages/peeky-runner/src/snapshot/matcher.ts
 create mode 100644 packages/peeky-runner/src/snapshot/plugins/html.ts
 create mode 100644 packages/peeky-runner/src/snapshot/read.ts
 create mode 100644 packages/peeky-runner/src/snapshot/types.ts
 create mode 100644 packages/peeky-runner/src/snapshot/util.ts
 create mode 100644 packages/peeky-runner/src/snapshot/version.ts
 create mode 100644 packages/peeky-runner/src/snapshot/write.ts
 create mode 100644 packages/peeky-server/src/schema/Snapshot.ts

diff --git a/examples/demo/src/__snapshots__/vue.spec.ts.snap b/examples/demo/src/__snapshots__/vue.spec.ts.snap
new file mode 100644
index 0000000..4f82fd5
--- /dev/null
+++ b/examples/demo/src/__snapshots__/vue.spec.ts.snap
@@ -0,0 +1,17 @@
+// Peeky snapshots v1.0
+
+exports[`vue create vue app 1`] = `
+<div data-v-app>
+  <div>
+    hello
+  </div>
+</div>
+`;
+
+exports[`vue create vue app demo 1`] = `
+"Hello"
+`;
+
+exports[`vue create vue app demo 2`] = `
+"Meow"
+`;
\ No newline at end of file
diff --git a/examples/demo/src/vue.spec.ts b/examples/demo/src/vue.spec.ts
index 21a3e85..a9b0ad9 100644
--- a/examples/demo/src/vue.spec.ts
+++ b/examples/demo/src/vue.spec.ts
@@ -13,13 +13,16 @@ describe('vue', () => {
           msg: 'hello',
         }
       },
-      template: '<div>hello</div>',
+      template: '<div>{{ msg }}</div>',
     })
     console.log(app)
     expect(typeof app.version).toBe('string')
     const el = document.createElement('div')
     document.body.appendChild(el)
     app.mount(el)
-    expect(el.innerHTML).toBe('<div>hello</div>')
+    expect(document.body.innerHTML).toMatchSnapshot()
+    expect('Hello').toMatchSnapshot('demo')
+    expect('Meow').toMatchSnapshot('demo')
+    // expect(el.innerHTML).toBe('<div>hello</div>')
   })
 })
diff --git a/examples/vue3/src/Hello.spec.ts b/examples/vue3/src/Hello.spec.ts
index cdb297b..697adde 100644
--- a/examples/vue3/src/Hello.spec.ts
+++ b/examples/vue3/src/Hello.spec.ts
@@ -13,8 +13,8 @@ describe('vue + peeky demo', () => {
     })
 
     expect(wrapper.text()).toContain('4 x 2 = 8')
-    // Available soon
-    // expect(wrapper.html()).toMatchSnapshot()
+
+    expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.get('button').trigger('click')
 
diff --git a/examples/vue3/src/__snapshots__/Hello.spec.ts.snap b/examples/vue3/src/__snapshots__/Hello.spec.ts.snap
new file mode 100644
index 0000000..0329ba5
--- /dev/null
+++ b/examples/vue3/src/__snapshots__/Hello.spec.ts.snap
@@ -0,0 +1,10 @@
+// Peeky snapshots v1.0
+
+exports[`vue + peeky demo mount component 1`] = `
+<pre>
+  4 x 2 = 9
+</pre>
+<button>
+  More
+</button>
+`;
\ No newline at end of file
diff --git a/packages/peeky-cli/src/bin.ts b/packages/peeky-cli/src/bin.ts
index 4b2a4bb..3b87d65 100644
--- a/packages/peeky-cli/src/bin.ts
+++ b/packages/peeky-cli/src/bin.ts
@@ -15,6 +15,7 @@ program.command('run [quickFilter]')
   .option('-m, --match <globs...>', 'Globs to match test files. Example: `peeky run -m "**/*.spec.ts" "**/__tests__/*.ts"`')
   .option('-i, --ignore <globs...>', 'Globs ignore when looking for test files. Example: `peeky run -i "node_modules" "dist/**/*.ts"`')
   .option('-r, --reporters <reporter...>', 'Reporters to use. Available: console-fancy, console-json')
+  .option('-u, --updateSnapshots', 'Update failing snapshots')
   .action(async (quickFilter, options) => {
     const { run } = await import('./commands/run.js')
     return run(quickFilter, options)
diff --git a/packages/peeky-cli/src/commands/run.ts b/packages/peeky-cli/src/commands/run.ts
index 4c207e1..9fc8de3 100644
--- a/packages/peeky-cli/src/commands/run.ts
+++ b/packages/peeky-cli/src/commands/run.ts
@@ -21,6 +21,9 @@ export async function run (quickFilter: string, options) {
 
     const { stats: { errorSuiteCount } } = await runAllTests(toProgramConfig(finalConfig), {
       quickTestFilter: quickFilter,
+      ...pick<any>(options, [
+        'updateSnapshots',
+      ]),
     })
 
     if (errorSuiteCount) {
diff --git a/packages/peeky-client/src/apollo.ts b/packages/peeky-client/src/apollo.ts
index 8ac4dc8..82406d2 100644
--- a/packages/peeky-client/src/apollo.ts
+++ b/packages/peeky-client/src/apollo.ts
@@ -123,4 +123,5 @@ const cache = new InMemoryCache({
 export const apolloClient = new ApolloClient({
   link,
   cache,
+  connectToDevTools: true,
 })
diff --git a/packages/peeky-client/src/features/BaseTab.vue b/packages/peeky-client/src/features/BaseTab.vue
index cd5597d..e146122 100644
--- a/packages/peeky-client/src/features/BaseTab.vue
+++ b/packages/peeky-client/src/features/BaseTab.vue
@@ -15,7 +15,7 @@ export default defineComponent({
     <a
       v-bind="$attrs"
       :href="href"
-      class="px-4 h-10 inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative"
+      class="px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative"
       :class="{
         'text-primary-500 dark:text-primary-400': isExactActive,
       }"
diff --git a/packages/peeky-client/src/features/editor/CodeEditor.vue b/packages/peeky-client/src/features/editor/CodeEditor.vue
new file mode 100644
index 0000000..9277074
--- /dev/null
+++ b/packages/peeky-client/src/features/editor/CodeEditor.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import * as monaco from 'monaco-editor'
+import { onMounted, ref, watch } from 'vue'
+import { onResize } from '../../util/resize'
+import '../../util/monaco'
+import { useSettings } from '../settings'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+})
+
+const el = ref<HTMLDivElement>()
+let editor: monaco.editor.IEditor
+
+onMounted(() => {
+  if (!el.value) return
+  editor = monaco.editor.create(el.value, {
+    readOnly: true,
+    lineNumbers: 'off',
+    scrollBeyondLastLine: false,
+  })
+  updateEditorModel()
+  updateEditorTheme()
+})
+
+/* Model */
+
+watch(() => [props.code], () => {
+  updateEditorModel()
+})
+
+function updateEditorModel () {
+  if (editor) {
+    editor.setModel(monaco.editor.createModel(props.code, props.code.trim().startsWith('<') ? 'html' : 'javascript'))
+  }
+}
+
+/* Theme */
+
+const { settings } = useSettings()
+
+watch(() => settings.value?.darkMode, () => {
+  updateEditorTheme()
+})
+
+function updateEditorTheme () {
+  if (!editor) return
+  editor.updateOptions({
+    // @ts-ignore
+    theme: settings.value?.darkMode ? 'peeky-dark' : 'peeky-light',
+  })
+}
+
+/* Resize */
+
+onResize(el, () => {
+  if (editor) {
+    editor.layout()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      ref="el"
+      class="flex-1"
+    />
+  </div>
+</template>
diff --git a/packages/peeky-client/src/features/test/TestAssertionDiff.vue b/packages/peeky-client/src/features/editor/DiffEditor.vue
similarity index 80%
rename from packages/peeky-client/src/features/test/TestAssertionDiff.vue
rename to packages/peeky-client/src/features/editor/DiffEditor.vue
index 6d0a191..69d4cb7 100644
--- a/packages/peeky-client/src/features/test/TestAssertionDiff.vue
+++ b/packages/peeky-client/src/features/editor/DiffEditor.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import * as monaco from 'monaco-editor'
-import { onMounted, ref, watch } from 'vue-demi'
+import { onMounted, ref, watch } from 'vue'
 import { onResize } from '../../util/resize'
 import '../../util/monaco'
 import { useSettings } from '../settings'
@@ -40,8 +40,8 @@ watch(() => [props.expected, props.actual], () => {
 function updateEditorModel () {
   if (editor) {
     editor.setModel({
-      original: monaco.editor.createModel(props.expected, 'javascript'),
-      modified: monaco.editor.createModel(props.actual, 'javascript'),
+      original: monaco.editor.createModel(props.expected, props.expected.trim().startsWith('<') ? 'html' : 'javascript'),
+      modified: monaco.editor.createModel(props.actual, props.actual.trim().startsWith('<') ? 'html' : 'javascript'),
     })
   }
 }
@@ -73,7 +73,7 @@ onResize(el, () => {
 
 <template>
   <div class="flex flex-col">
-    <div class="flex-none flex justify-between px-1 mb-1">
+    <div class="flex-none flex justify-between px-4 pt-2 mb-1 text-sm">
       <div class="text-green-600 dark:text-green-500">
         Expected
       </div>
diff --git a/packages/peeky-client/src/features/snapshot/SnapshotItem.vue b/packages/peeky-client/src/features/snapshot/SnapshotItem.vue
new file mode 100644
index 0000000..c44c0a1
--- /dev/null
+++ b/packages/peeky-client/src/features/snapshot/SnapshotItem.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import StatusIcon from '../StatusIcon.vue'
+
+const props = defineProps({
+  snapshot: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <router-link
+    :to="{
+      query: {
+        ...$route.query,
+        snapshotId: snapshot.id,
+      },
+    }"
+    class="px-3 flex items-center hover:bg-gray-50 dark:hover:bg-gray-900 space-x-2 h-8"
+    :class="{
+      'active-colors': $route.query.snapshotId === snapshot.id,
+    }"
+  >
+    <StatusIcon
+      :status="snapshot.newContent && !snapshot.updated ? 'error' : 'success'"
+      class="w-5 h-5"
+    />
+    <span class="flex-1 truncate py-1">
+      {{ snapshot.title }}
+    </span>
+  </router-link>
+</template>
diff --git a/packages/peeky-client/src/features/snapshot/SnapshotView.vue b/packages/peeky-client/src/features/snapshot/SnapshotView.vue
new file mode 100644
index 0000000..bdb9552
--- /dev/null
+++ b/packages/peeky-client/src/features/snapshot/SnapshotView.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { useMutation } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { ChevronLeftIcon, ChevronRightIcon, SaveIcon } from '@zhuowenli/vue-feather-icons'
+import BaseButton from '../BaseButton.vue'
+import CodeEditor from '../editor/CodeEditor.vue'
+import DiffEditor from '../editor/DiffEditor.vue'
+
+const props = defineProps({
+  snapshot: {
+    type: Object,
+    required: true,
+  },
+
+  test: {
+    type: Object,
+    required: true,
+  },
+
+  suite: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { mutate: openInEditor } = useMutation(gql`
+mutation openInEditor ($id: ID!, $line: Int!, $col: Int!) {
+  openTestFileInEditor (id: $id, line: $line, col: $col)
+}
+`)
+
+const { mutate: updateSnapshot } = useMutation(gql`
+mutation updateSnapshot ($id: ID!) {
+  updateSnapshot (input: { id: $id }) {
+    id
+    updated
+  }
+}
+`, {
+  update: (cache, { data: { updateSnapshot: snapshot } }) => {
+    const select = {
+      fragment: gql`fragment updateSnapshotCacheTest on Test {
+        id
+        failedSnapshotCount
+      }`,
+      id: `Test:${props.test.id}`,
+    }
+    const data: any = cache.readFragment(select)
+    cache.writeFragment({
+      ...select,
+      data: {
+        ...data,
+        failedSnapshotCount: data.failedSnapshotCount - 1,
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div class="flex flex-col divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden">
+    <div class="flex items-center space-x-2 px-4 h-10">
+      <button
+        v-if="snapshot.newContent && !snapshot.updated"
+        class="text-red-500 hover:text-red-400 hover:bg-red-500/10 rounded cursor-pointer px-2 py-1"
+        @click="openInEditor({
+          id: suite.runTestFile.testFile.id,
+          line: snapshot.line,
+          col: snapshot.col,
+        })"
+      >
+        Mismatch at <span class="font-mono text-sm">{{ suite?.runTestFile.testFile.relativePath }}:{{ snapshot.line }}:{{ snapshot.col }}</span>
+      </button>
+
+      <div class="flex-1" />
+
+      <BaseButton
+        v-if="snapshot.newContent && !snapshot.updated && $route.params.runId === 'last-run'"
+        class="px-2 h-8"
+        @click="updateSnapshot({ id: snapshot.id })"
+      >
+        <SaveIcon class="w-4 h-4 mr-1" />
+        <span>Update snapshot</span>
+      </BaseButton>
+
+      <BaseButton
+        color="gray"
+        flat
+        class="p-2"
+        @click="$emit('previous')"
+      >
+        <ChevronLeftIcon class="w-4 h-4" />
+      </BaseButton>
+
+      <BaseButton
+        color="gray"
+        flat
+        class="p-2"
+        @click="$emit('next')"
+      >
+        <ChevronRightIcon class="w-4 h-4" />
+      </BaseButton>
+    </div>
+
+    <DiffEditor
+      v-if="snapshot.newContent && !snapshot.updated"
+      :actual="snapshot.newContent"
+      :expected="snapshot.content"
+      class="flex-1"
+    />
+    <CodeEditor
+      v-else
+      :code="snapshot.content"
+      class="flex-1"
+    />
+  </div>
+</template>
diff --git a/packages/peeky-client/src/features/test-file/TestFileItem.vue b/packages/peeky-client/src/features/test-file/TestFileItem.vue
index 1119e96..4804746 100644
--- a/packages/peeky-client/src/features/test-file/TestFileItem.vue
+++ b/packages/peeky-client/src/features/test-file/TestFileItem.vue
@@ -13,6 +13,7 @@ const props = defineProps({
   <router-link
     :to="{
       query: {
+        ...$route.query,
         fileSlug: file.slug,
       },
     }"
diff --git a/packages/peeky-client/src/features/test/TestResult.vue b/packages/peeky-client/src/features/test/TestResult.vue
index 0a22604..33177bd 100644
--- a/packages/peeky-client/src/features/test/TestResult.vue
+++ b/packages/peeky-client/src/features/test/TestResult.vue
@@ -19,7 +19,7 @@ import { computed, defineProps, ref } from 'vue'
 import { ChevronRightIcon } from '@zhuowenli/vue-feather-icons'
 import BaseButton from '../BaseButton.vue'
 import StatusIcon from '../StatusIcon.vue'
-import TestAssertionDiff from './TestAssertionDiff.vue'
+import DiffEditor from '../editor/DiffEditor.vue'
 
 const props = defineProps({
   test: {
@@ -132,7 +132,7 @@ const diffShown = computed(() => props.test?.error?.actual && props.test?.error?
         </div>
       </div>
 
-      <TestAssertionDiff
+      <DiffEditor
         v-if="diffShown"
         :actual="test.error.actual"
         :expected="test.error.expected"
diff --git a/packages/peeky-client/src/features/test/TestSnapshots.vue b/packages/peeky-client/src/features/test/TestSnapshots.vue
new file mode 100644
index 0000000..8e41110
--- /dev/null
+++ b/packages/peeky-client/src/features/test/TestSnapshots.vue
@@ -0,0 +1,123 @@
+
+<script lang="ts" setup>
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { useRoute, useRouter } from 'vue-router'
+import { computed, defineProps, watch } from 'vue'
+
+import BaseSplitPane from '../BaseSplitPane.vue'
+import SnapshotItem from '../snapshot/SnapshotItem.vue'
+import SnapshotView from '../snapshot/SnapshotView.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps({
+  test: {
+    type: Object,
+    required: true,
+  },
+
+  suite: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { result, refetch } = useQuery(() => gql`
+  query testLogs ($runId: ID!, $suiteId: ID!, $testId: ID!) {
+    run (id: $runId) {
+      id
+      testSuite: testSuiteById (id: $suiteId) {
+        id
+        test: testById (id: $testId) {
+          id
+          snapshots {
+            id
+            title
+            content
+            newContent
+            line
+            col
+            updated
+          }
+        }
+      }
+    }
+  }
+`, () => ({
+  runId: route.params.runId,
+  suiteId: props.suite.id,
+  testId: props.test.id,
+}), {
+  fetchPolicy: 'network-only',
+})
+
+const snapshots = computed(() => result.value?.run?.testSuite?.test?.snapshots ?? [])
+
+watch(() => props.test.status, () => {
+  refetch()
+})
+
+const selectedSnapshot = computed(() => snapshots.value.find((s: any) => s.id === route.query.snapshotId))
+
+function selectPrevious () {
+  let index = snapshots.value.indexOf(selectedSnapshot.value)
+  index--
+  if (index < 0) {
+    index = snapshots.value.length - 1
+  }
+  router.push({
+    query: {
+      ...route.query,
+      snapshotId: snapshots.value[index].id,
+    },
+  })
+}
+
+function selectNext () {
+  let index = snapshots.value.indexOf(selectedSnapshot.value)
+  index++
+  if (index > snapshots.value.length - 1) {
+    index = 0
+  }
+  router.push({
+    query: {
+      ...route.query,
+      snapshotId: snapshots.value[index].id,
+    },
+  })
+}
+</script>
+
+<template>
+  <BaseSplitPane
+    :default-split="30"
+    :min="5"
+    :max="70"
+    save-id="peeky-test-snapshots"
+    class="h-full"
+  >
+    <template #first>
+      <div class="overflow-auto">
+        <SnapshotItem
+          v-for="snapshot of snapshots"
+          :key="snapshot.id"
+          :snapshot="snapshot"
+        />
+      </div>
+    </template>
+
+    <template #last>
+      <SnapshotView
+        v-if="selectedSnapshot"
+        :snapshot="selectedSnapshot"
+        :test="test"
+        :suite="suite"
+        class="h-full"
+        @previous="selectPrevious()"
+        @next="selectNext()"
+      />
+    </template>
+  </BaseSplitPane>
+</template>
diff --git a/packages/peeky-client/src/features/test/TestView.vue b/packages/peeky-client/src/features/test/TestView.vue
index f883981..bc384ab 100644
--- a/packages/peeky-client/src/features/test/TestView.vue
+++ b/packages/peeky-client/src/features/test/TestView.vue
@@ -22,6 +22,8 @@ fragment testView on Test {
     ...testResultError
   }
   hasLogs
+  snapshotCount
+  failedSnapshotCount
 }
 ${errorFragment}
 `
@@ -139,14 +141,20 @@ mutation openInEditor ($id: ID!, $line: Int!, $col: Int!) {
     </div>
 
     <!-- Tabs -->
-    <nav>
+    <nav class="h-10">
       <BaseTab
-        :to="{ name: 'test' }"
+        :to="{
+          name: 'test',
+          query: { ...$route.query },
+        }"
       >
         Result
       </BaseTab>
       <BaseTab
-        :to="{ name: 'test-output' }"
+        :to="{
+          name: 'test-output',
+          query: { ...$route.query },
+        }"
       >
         <div class="flex items-center space-x-2">
           <span>Output</span>
@@ -156,6 +164,26 @@ mutation openInEditor ($id: ID!, $line: Int!, $col: Int!) {
           />
         </div>
       </BaseTab>
+      <BaseTab
+        :to="{
+          name: 'test-snapshots',
+          query: { ...$route.query },
+        }"
+      >
+        <div class="flex items-center space-x-2">
+          <span>Snapshots</span>
+          <div
+            v-if="test.failedSnapshotCount"
+            class="text-xs px-1.5 rounded leading-tight text-red-200 bg-red-600 mt-0.5"
+          >
+            {{ test.failedSnapshotCount }}
+          </div>
+          <div
+            v-else-if="test.snapshotCount"
+            class="w-2 h-2 bg-primary-500 dark:bg-primary-400 rounded-full"
+          />
+        </div>
+      </BaseTab>
     </nav>
 
     <router-view
diff --git a/packages/peeky-client/src/router.ts b/packages/peeky-client/src/router.ts
index e5a1a7f..e09a2ca 100644
--- a/packages/peeky-client/src/router.ts
+++ b/packages/peeky-client/src/router.ts
@@ -39,6 +39,11 @@ export const router = createRouter({
                   name: 'test-output',
                   component: () => import('./features/test/TestOutput.vue'),
                 },
+                {
+                  path: 'snapshots',
+                  name: 'test-snapshots',
+                  component: () => import('./features/test/TestSnapshots.vue'),
+                },
               ],
             },
           ],
diff --git a/packages/peeky-runner/package.json b/packages/peeky-runner/package.json
index 76c1ca4..ffb97bf 100644
--- a/packages/peeky-runner/package.json
+++ b/packages/peeky-runner/package.json
@@ -38,17 +38,20 @@
     "chalk": "^5.0.0",
     "collect-v8-coverage": "^1.0.1",
     "consola": "^2.15.0",
+    "diffable-html": "^5.0.0",
     "expect": "^27.0.6",
     "fast-copy": "^2.1.1",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0",
     "fs-monkey": "^1.0.3",
     "happy-dom": "^2.24.4",
+    "jest-diff": "^27.4.2",
     "lodash": "^4.17.21",
     "memfs": "^3.2.0",
     "mlly": "^0.3.16",
     "pathe": "^0.2.0",
     "pragma": "^1.0.0",
+    "pretty-format": "^27.4.2",
     "reactive-fs": "^0.4.1",
     "shortid": "^2.2.16",
     "sinon": "^9.2.3",
@@ -59,6 +62,7 @@
     "vite": "^2.7.1"
   },
   "devDependencies": {
+    "@types/fs-extra": "^9.0.13",
     "@types/lodash": "^4.14.178",
     "@types/node": "^14.14.21",
     "@types/shortid": "^0.0.29",
diff --git a/packages/peeky-runner/src/index.ts b/packages/peeky-runner/src/index.ts
index 4aaf1f5..645dc30 100644
--- a/packages/peeky-runner/src/index.ts
+++ b/packages/peeky-runner/src/index.ts
@@ -1,5 +1,6 @@
 export * from './run-all.js'
 export * from './runner.js'
+export * from './snapshot/index.js'
 export * from './stats.js'
 export * from './types.js'
 export * from './runtime/environment.js'
diff --git a/packages/peeky-runner/src/message.ts b/packages/peeky-runner/src/message.ts
index 37424ab..ef66109 100644
--- a/packages/peeky-runner/src/message.ts
+++ b/packages/peeky-runner/src/message.ts
@@ -1,6 +1,7 @@
 import { MessageChannel } from 'worker_threads'
 import type { TransformResult } from 'vite'
 import { TestFlag } from './types.js'
+import { Snapshot } from './snapshot/types.js'
 
 export interface WorkerRemoteMethods {
   onSuiteStart: (suite: SuiteStartData) => void
@@ -8,8 +9,9 @@ export interface WorkerRemoteMethods {
   onTestStart: (suiteId: string, testId: string) => void
   onTestError: (suiteId: string, testId: string, duration: number, error: TestErrorData) => void
   onTestSuccess: (suiteId: string, testId: string, duration: number) => void
-  transform: (id: string) => Promise<TransformResult>
+  onTestSnapshotsProcessed: (suiteId: string, testId: string, snapshots: Snapshot[]) => void
   onLog: (suiteId: string, testId: string, type: 'stdout' | 'stderr', text: string, file?: string) => void
+  transform: (id: string) => Promise<TransformResult>
   testFileCompleteHandshake: () => Promise<void>
 }
 
diff --git a/packages/peeky-runner/src/reporters/console-fancy.ts b/packages/peeky-runner/src/reporters/console-fancy.ts
index ca355aa..7483448 100644
--- a/packages/peeky-runner/src/reporters/console-fancy.ts
+++ b/packages/peeky-runner/src/reporters/console-fancy.ts
@@ -1,5 +1,6 @@
 import consola from 'consola'
 import chalk from 'chalk'
+import { diffStringsUnified } from 'jest-diff'
 import { formatDurationToString } from '@peeky/utils'
 import { Reporter } from '../types.js'
 
@@ -34,6 +35,15 @@ export function createConsoleFancyReporter (): Reporter {
       }
     },
 
+    snapshotSummary: ({ snapshotCount, failedSnapshots }) => {
+      consola.log(`\n\n${chalk.red(drawBox(`${failedSnapshots.length} / ${snapshotCount} failed snapshots`, chalk.bold))}\n`)
+
+      for (const snapshot of failedSnapshots) {
+        consola.log(chalk.red(`${chalk.bgRedBright.black.bold(' FAIL ')} ${chalk.bold(snapshot.title)}`))
+        consola.log(`\n${diffStringsUnified(snapshot.newContent, snapshot.content)}\n${snapshot.error.stack}\n`)
+      }
+    },
+
     coverageSummary: ({
       uncoveredFiles,
       partiallyCoveredFiles,
@@ -83,9 +93,36 @@ export function createConsoleFancyReporter (): Reporter {
       errorSuiteCount,
       testCount,
       errorTestCount,
+      snapshotCount,
+      failedSnapshotCount,
+      updatedSnapshotCount,
+      newSnapshotCount,
     }) => {
       consola.log(`\n${drawBox(`Ran ${fileCount} tests files (${formatDurationToString(duration)})`)}\n`)
-      consola.log(chalk[errorSuiteCount ? 'red' : 'green'](`  ${chalk.dim('Suites')} ${chalk.bold(`${suiteCount - errorSuiteCount} / ${suiteCount}`)}\n   ${chalk.dim('Tests')} ${chalk.bold(`${testCount - errorTestCount} / ${testCount}`)}\n  ${chalk.dim('Errors')} ${chalk.bold(errorTestCount)}\n`))
+
+      let snapshotSummary = `${snapshotCount - failedSnapshotCount} / ${snapshotCount}`
+      const snapshotDetails: string[] = []
+      if (failedSnapshotCount) {
+        snapshotDetails.push(`failed: ${failedSnapshotCount}`)
+      }
+      if (updatedSnapshotCount) {
+        snapshotDetails.push(`updated: ${updatedSnapshotCount}`)
+      }
+      if (newSnapshotCount) {
+        snapshotDetails.push(`new: ${newSnapshotCount}`)
+      }
+      if (snapshotDetails.length) {
+        snapshotSummary += ` (${snapshotDetails.join(', ')})`
+      }
+
+      const stats = [
+        ['Suites', `${suiteCount - errorSuiteCount} / ${suiteCount}`],
+        ['Tests', `${testCount - errorTestCount} / ${testCount}`],
+        ['Snapshots', snapshotSummary],
+        ['Errors', `${errorTestCount}`],
+      ]
+      const colSize = Math.max(...stats.map(([label]) => label.length)) + 2
+      consola.log(chalk[errorSuiteCount ? 'red' : 'green'](stats.map(t => `${chalk.dim(t[0].padStart(colSize, ' '))} ${chalk.bold(t[1])}\n`).join('')))
     },
   }
 }
diff --git a/packages/peeky-runner/src/run-all.ts b/packages/peeky-runner/src/run-all.ts
index da7edf8..2d45bdb 100644
--- a/packages/peeky-runner/src/run-all.ts
+++ b/packages/peeky-runner/src/run-all.ts
@@ -9,6 +9,7 @@ import { createRawReporter } from './reporters/raw.js'
 
 export interface RunAllOptions {
   quickTestFilter?: string
+  updateSnapshots?: boolean
 }
 
 export async function runAllTests (config: ProgramPeekyConfig, options: RunAllOptions = {}) {
@@ -44,7 +45,7 @@ export async function runAllTests (config: ProgramPeekyConfig, options: RunAllOp
   }
 
   const time = performance.now()
-  const result = await Promise.all(fileList.map(f => runner.runTestFile(f)))
+  const result = await Promise.all(fileList.map(f => runner.runTestFile(f, [], options.updateSnapshots)))
   const endTime = performance.now()
 
   const stats = getStats(result)
@@ -54,12 +55,18 @@ export async function runAllTests (config: ProgramPeekyConfig, options: RunAllOp
     errorSuiteCount,
     testCount,
     errorTestCount,
+    snapshotCount,
+    failedSnapshots,
+    newSnapshots,
   } = stats
 
   // Error summary
   if (errorTestCount) {
     reporters.forEach(r => r.errorSummary?.({ suites, errorTestCount, testCount }))
   }
+  if (failedSnapshots.length) {
+    reporters.forEach(r => r.snapshotSummary?.({ snapshotCount, failedSnapshots }))
+  }
 
   // Coverage
   const emptyCoverageIgnored = [
@@ -92,6 +99,10 @@ export async function runAllTests (config: ProgramPeekyConfig, options: RunAllOp
     errorSuiteCount,
     testCount,
     errorTestCount,
+    snapshotCount,
+    failedSnapshotCount: options.updateSnapshots ? 0 : failedSnapshots.length,
+    updatedSnapshotCount: options.updateSnapshots ? failedSnapshots.length : 0,
+    newSnapshotCount: newSnapshots.length,
   }))
 
   await runner.close()
diff --git a/packages/peeky-runner/src/runner.ts b/packages/peeky-runner/src/runner.ts
index b20681a..644f93a 100644
--- a/packages/peeky-runner/src/runner.ts
+++ b/packages/peeky-runner/src/runner.ts
@@ -112,7 +112,7 @@ export async function setupRunner (options: RunnerOptions) {
     return result
   }
 
-  async function runTestFile (relativePath: string, clearDeps: string[] = []) {
+  async function runTestFile (relativePath: string, clearDeps: string[] = [], updateSnapshots = false) {
     const file = testFiles.files[relativePath]
     if (file) {
       const result = await runTestFileWorker({
@@ -123,6 +123,7 @@ export async function setupRunner (options: RunnerOptions) {
           ignored: [...ctx.options.config.match ?? [], ...ctx.options.config.ignored ?? []],
         },
         clearDeps,
+        updateSnapshots,
       })
 
       // Patch filePath
diff --git a/packages/peeky-runner/src/runtime/run-test-file.ts b/packages/peeky-runner/src/runtime/run-test-file.ts
index c3434ff..91b07c2 100644
--- a/packages/peeky-runner/src/runtime/run-test-file.ts
+++ b/packages/peeky-runner/src/runtime/run-test-file.ts
@@ -5,6 +5,7 @@ import consola from 'consola'
 import { CoverageInstrumenter } from 'collect-v8-coverage'
 import fs from 'fs-extra'
 import pragma from 'pragma'
+import expect from 'expect'
 import { InstantiableTestEnvironmentClass, mergeConfig } from '@peeky/config'
 import type { Context, ReporterTestSuite, RunTestFileOptions } from '../types'
 import { useVite } from './vite.js'
@@ -19,6 +20,12 @@ import { moduleCache, sourceMaps } from './module-cache.js'
 import { baseConfig, setupWorker } from './setup.js'
 import { toMainThread } from './message.js'
 import { setCurrentTestFile } from './global-context.js'
+import { SnapshotMatcher } from '../snapshot/matcher.js'
+
+const snapshotMatcher = new SnapshotMatcher()
+expect.extend({
+  toMatchSnapshot: snapshotMatcher.toMatchSnapshot.bind(snapshotMatcher),
+})
 
 export async function runTestFile (options: RunTestFileOptions) {
   try {
@@ -50,6 +57,7 @@ export async function runTestFile (options: RunTestFileOptions) {
       options,
       suites: [],
       pragma: pragmaObject ?? {},
+      snapshots: [],
     }
 
     // Restore mocked module
@@ -112,16 +120,25 @@ export async function runTestFile (options: RunTestFileOptions) {
     // Register suites and tests
     await register.collect()
 
+    // Snapshots
+    await snapshotMatcher.start(ctx)
+
     const instrumenter = new CoverageInstrumenter()
     await instrumenter.startInstrumenting()
 
     // Run all tests in the test file
     if (ufs) ufs._enabled = true
-    await runTests(ctx)
+    await runTests(ctx, !options.updateSnapshots)
     if (ufs) ufs._enabled = false
 
     const coverage = await getCoverage(await instrumenter.stopInstrumenting(), ctx)
 
+    const {
+      failedSnapshots,
+      newSnapshots,
+      passedSnapshots,
+    } = await snapshotMatcher.end(options.updateSnapshots)
+
     await runtimeEnv.destroy()
 
     const duration = performance.now() - time
@@ -152,6 +169,9 @@ export async function runTestFile (options: RunTestFileOptions) {
       duration,
       coverage,
       deps: executionResult.deps.concat(options.entry),
+      failedSnapshots,
+      newSnapshots,
+      passedSnapshots,
     }
   } catch (e) {
     consola.error(`Running tests failed: ${e.stack}`)
diff --git a/packages/peeky-runner/src/runtime/run-tests.ts b/packages/peeky-runner/src/runtime/run-tests.ts
index 00f7502..a6b6f89 100644
--- a/packages/peeky-runner/src/runtime/run-tests.ts
+++ b/packages/peeky-runner/src/runtime/run-tests.ts
@@ -4,7 +4,7 @@ import type { Context, Test } from '../types'
 import { setCurrentSuite, setCurrentTest } from './global-context.js'
 import { toMainThread } from './message.js'
 
-export async function runTests (ctx: Context) {
+export async function runTests (ctx: Context, failOnSnapshots: boolean) {
   const { default: sinon } = await import('sinon')
 
   for (const suite of ctx.suites) {
@@ -49,6 +49,15 @@ export async function runTests (ctx: Context) {
         const time = performance.now()
         try {
           await test.handler()
+
+          if (failOnSnapshots && test.failedSnapshots > 0) {
+            const e = new Error(`Mismatched ${test.failedSnapshots} snapshot${test.failedSnapshots > 1 ? 's' : ''}`)
+            const stack = test.snapshots.find(s => s.error).error.stack.split('\n')
+            stack[0] = e.message
+            e.stack = stack.join('\n')
+            throw e
+          }
+
           test.duration = performance.now() - time
           toMainThread().onTestSuccess(suite.id, test.id, test.duration)
         } catch (e) {
@@ -72,6 +81,10 @@ export async function runTests (ctx: Context) {
           await handler()
         }
 
+        if (test.snapshots.length) {
+          toMainThread().onTestSnapshotsProcessed(suite.id, test.id, test.snapshots)
+        }
+
         setCurrentTest(null)
       }
 
diff --git a/packages/peeky-runner/src/runtime/test-register.ts b/packages/peeky-runner/src/runtime/test-register.ts
index ef3cbca..f246dcf 100644
--- a/packages/peeky-runner/src/runtime/test-register.ts
+++ b/packages/peeky-runner/src/runtime/test-register.ts
@@ -67,6 +67,8 @@ export function setupRegister (ctx: Context): {
       handler,
       error: null,
       flag,
+      failedSnapshots: 0,
+      snapshots: [],
     })
   }
 
diff --git a/packages/peeky-runner/src/snapshot/format.ts b/packages/peeky-runner/src/snapshot/format.ts
new file mode 100644
index 0000000..2ede1fc
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/format.ts
@@ -0,0 +1,31 @@
+import { plugins as prettyFormatPlugins, format as prettyFormat } from 'pretty-format'
+import type { Plugin } from 'pretty-format'
+import HtmlFormat from './plugins/html.js'
+
+const {
+  DOMCollection,
+  DOMElement,
+  Immutable,
+  ReactElement,
+  ReactTestComponent,
+  AsymmetricMatcher,
+} = prettyFormatPlugins
+
+const builtinPlugins: Plugin[] = [
+  ReactTestComponent,
+  ReactElement,
+  DOMElement,
+  DOMCollection,
+  Immutable,
+  AsymmetricMatcher,
+  HtmlFormat,
+]
+
+export function format (value: any, plugins: Plugin[]) {
+  return prettyFormat(value, {
+    escapeRegex: true,
+    printFunctionName: false,
+    indent: 2,
+    plugins: [...builtinPlugins, ...plugins],
+  })
+}
diff --git a/packages/peeky-runner/src/snapshot/index.ts b/packages/peeky-runner/src/snapshot/index.ts
new file mode 100644
index 0000000..72aed36
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/index.ts
@@ -0,0 +1,3 @@
+export * from './read.js'
+export * from './write.js'
+export * from './types.js'
diff --git a/packages/peeky-runner/src/snapshot/matcher.ts b/packages/peeky-runner/src/snapshot/matcher.ts
new file mode 100644
index 0000000..11ebc15
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/matcher.ts
@@ -0,0 +1,106 @@
+// @TODO prop matchers
+
+import type { ExpectationResult } from 'expect/build/types'
+import type { Plugin } from 'pretty-format'
+import type { Context, Test } from '../types.js'
+import type { Snapshot } from './types.js'
+import { readSnapshots } from './read.js'
+import { format } from './format.js'
+import { currentTest } from '../runtime/global-context.js'
+import { generateSnapshotId, generateSnapshotTitle } from './util.js'
+import { writeSnapshots } from './write.js'
+import { basename } from 'pathe'
+
+export class SnapshotMatcher {
+  ctx: Context
+  existingSnapshots: Snapshot[]
+  failedSnapshots: Snapshot[]
+  passedSnapshots: Snapshot[]
+  newSnapshots: Snapshot[]
+  processedSnapshots: Snapshot[]
+  currentTest: Test
+  currentIndex: number
+  plugins: Plugin[] = [] // @TODO serializer plugins
+  titleMap: Record<string, number>
+
+  async start (ctx: Context) {
+    this.ctx = ctx
+    this.existingSnapshots = await readSnapshots(this.ctx.options.entry)
+    this.titleMap = {}
+    this.failedSnapshots = []
+    this.passedSnapshots = []
+    this.newSnapshots = []
+    this.processedSnapshots = []
+  }
+
+  toMatchSnapshot (received: any, propertiesMatchers: any, hint?: string): ExpectationResult {
+    if (!currentTest) {
+      throw new Error(`toMatchSnapshot can't be called outside of a test`)
+    }
+
+    if (typeof propertiesMatchers !== 'object') {
+      hint = propertiesMatchers
+    }
+
+    if (this.currentTest !== currentTest) {
+      this.currentTest = currentTest
+      this.currentIndex = 1
+    } else {
+      this.currentIndex++
+    }
+
+    const testFile = this.ctx.options.entry
+
+    const formattedReceived = `\n${format(received, this.plugins)}\n`
+
+    const snapshotTitle = generateSnapshotTitle(this.titleMap, hint)
+
+    let processedSnapshot: Snapshot
+    const existingSnapshot = processedSnapshot = this.existingSnapshots.find(s => s.title === snapshotTitle)
+    if (existingSnapshot) {
+      existingSnapshot.visited = true
+      if (existingSnapshot.content !== formattedReceived) {
+        existingSnapshot.newContent = formattedReceived
+        const error: any = existingSnapshot.error = new Error(`Snapshot '${snapshotTitle}' mismatch`)
+        error.matcherResult = {
+          expected: existingSnapshot.content,
+          actual: formattedReceived,
+        }
+
+        // Stack
+        const stackLines = error.stack.split('\n')
+        const stackFileLine = stackLines.find(l => l.includes(basename(testFile)))
+        error.stack = [stackLines[0], stackFileLine].filter(Boolean).join('\n')
+
+        this.failedSnapshots.push(existingSnapshot)
+        currentTest.failedSnapshots++
+      } else {
+        this.passedSnapshots.push(existingSnapshot)
+      }
+    } else {
+      this.newSnapshots.push(processedSnapshot = {
+        id: generateSnapshotId(testFile, snapshotTitle),
+        title: snapshotTitle,
+        testFile,
+        content: formattedReceived,
+      })
+    }
+    this.processedSnapshots.push(processedSnapshot)
+    currentTest.snapshots.push(processedSnapshot)
+
+    return {
+      message: () => '',
+      pass: true,
+    }
+  }
+
+  async end (updateSnapshots: boolean) {
+    await writeSnapshots(this.ctx.options.entry, this.processedSnapshots, updateSnapshots)
+
+    return {
+      failedSnapshots: this.failedSnapshots,
+      passedSnapshots: this.passedSnapshots,
+      newSnapshots: this.newSnapshots,
+    }
+  }
+}
diff --git a/packages/peeky-runner/src/snapshot/plugins/html.ts b/packages/peeky-runner/src/snapshot/plugins/html.ts
new file mode 100644
index 0000000..7ab328c
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/plugins/html.ts
@@ -0,0 +1,23 @@
+import beautify from 'diffable-html'
+
+// Detection
+
+const isHtmlString = received => received && typeof received === 'string' && received[0] === '<'
+
+// Cleaning
+
+const removeServerRenderedText = html => html.replace(/ data-server-rendered="true"/, '')
+// [-\w]+ will catch 1 or more instances of a-z, A-Z, 0-9, hyphen (-), or underscore (_)
+const removeDataTestAttributes = html => html.replace(/ data-test="[-\w]+"/g, '')
+
+export default {
+  test (received) {
+    return isHtmlString(received)
+  },
+  print (received) {
+    let html = received || ''
+    html = removeServerRenderedText(html)
+    html = removeDataTestAttributes(html)
+    return beautify(html).trim()
+  },
+}
diff --git a/packages/peeky-runner/src/snapshot/read.ts b/packages/peeky-runner/src/snapshot/read.ts
new file mode 100644
index 0000000..4845551
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/read.ts
@@ -0,0 +1,28 @@
+import vm from 'vm'
+import fs from 'fs-extra'
+import type { Snapshot } from './types.js'
+import { generateSnapshotId, resolveSnapshotPath } from './util.js'
+
+export async function readSnapshots (testFile: string): Promise<Snapshot[]> {
+  const file = resolveSnapshotPath(testFile)
+  if (!fs.existsSync(file)) {
+    return []
+  }
+  const content = await fs.readFile(file, 'utf8')
+
+  const exports: Record<string, string> = {}
+  const context = {
+    exports,
+  }
+  const fn = vm.runInThisContext(`(${Object.keys(context).join(',')}) => { ${content}\n }`, {
+    filename: file,
+  })
+  fn(...Object.values(context))
+
+  return Object.keys(exports).map(title => ({
+    id: generateSnapshotId(testFile, title),
+    title,
+    testFile,
+    content: exports[title],
+  }))
+}
diff --git a/packages/peeky-runner/src/snapshot/types.ts b/packages/peeky-runner/src/snapshot/types.ts
new file mode 100644
index 0000000..ac4d94b
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/types.ts
@@ -0,0 +1,9 @@
+export interface Snapshot {
+  id: string
+  testFile: string
+  title: string
+  content: string
+  newContent?: string
+  error?: Error
+  visited?: boolean
+}
diff --git a/packages/peeky-runner/src/snapshot/util.ts b/packages/peeky-runner/src/snapshot/util.ts
new file mode 100644
index 0000000..dbab612
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/util.ts
@@ -0,0 +1,19 @@
+import crypto from 'crypto'
+import { basename, resolve, dirname } from 'pathe'
+import { currentSuite, currentTest } from '../runtime/global-context.js'
+import { Snapshot } from './types.js'
+
+export function resolveSnapshotPath (testFile: string) {
+  return resolve(dirname(testFile), '__snapshots__', `${basename(testFile)}.snap`)
+}
+
+export function generateSnapshotTitle (titleMap: Record<string, number>, hint?: string) {
+  const titleBase = [currentSuite.title, currentTest.title, hint].filter(t => t != null).join(' ')
+  const index = (titleMap[titleBase] ?? 0) + 1
+  titleMap[titleBase] = index
+  return `${titleBase} ${index}`
+}
+
+export function generateSnapshotId (testFile: string, title: string) {
+  return crypto.createHash('md5').update(`${testFile}:${title}`).digest('hex')
+}
diff --git a/packages/peeky-runner/src/snapshot/version.ts b/packages/peeky-runner/src/snapshot/version.ts
new file mode 100644
index 0000000..a327be7
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/version.ts
@@ -0,0 +1 @@
+export const SNAPSHOTS_VERSION = '1.0'
diff --git a/packages/peeky-runner/src/snapshot/write.ts b/packages/peeky-runner/src/snapshot/write.ts
new file mode 100644
index 0000000..5125539
--- /dev/null
+++ b/packages/peeky-runner/src/snapshot/write.ts
@@ -0,0 +1,34 @@
+import fs from 'fs-extra'
+import type { Snapshot } from './types.js'
+import { SNAPSHOTS_VERSION } from './version.js'
+import { resolveSnapshotPath } from './util.js'
+import { dirname } from 'pathe'
+
+export async function writeSnapshots (testFile: string, snapshots: Snapshot[], useNewContent: boolean) {
+  if (!snapshots.length) return
+  const content = addNewLines([
+    stringifyVersion(),
+    ...snapshots.map(s => stringifySnapshot(s, useNewContent)),
+  ])
+  const file = resolveSnapshotPath(testFile)
+  await fs.ensureDir(dirname(file))
+  await fs.writeFile(file, content, 'utf8')
+}
+
+function stringifyVersion () {
+  return `// Peeky snapshots v${SNAPSHOTS_VERSION}`
+}
+
+function stringifySnapshot (snapshot: Snapshot, useNewContent: boolean) {
+  let content: string
+  if (useNewContent) {
+    content = snapshot.newContent
+  } else {
+    content = snapshot.content
+  }
+  return `exports[\`${snapshot.title}\`] = \`${content ?? snapshot.content}\`;`
+}
+
+function addNewLines (lines: string[]) {
+  return lines.join('\n\n')
+}
diff --git a/packages/peeky-runner/src/stats.ts b/packages/peeky-runner/src/stats.ts
index 0e9ef8e..098aa8c 100644
--- a/packages/peeky-runner/src/stats.ts
+++ b/packages/peeky-runner/src/stats.ts
@@ -1,4 +1,5 @@
 import { RunTestFileResult } from './runner.js'
+import { Snapshot } from './snapshot/types.js'
 import { ReporterTestSuite } from './types.js'
 
 export function getStats (results: RunTestFileResult[]) {
@@ -6,8 +7,14 @@ export function getStats (results: RunTestFileResult[]) {
   let testCount = 0
   let errorTestCount = 0
   const suites: ReporterTestSuite[] = []
+  const failedSnapshots: Snapshot[] = []
+  const passedSnapshots: Snapshot[] = []
+  const newSnapshots: Snapshot[] = []
   for (const file of results) {
     suites.push(...file.suites)
+    failedSnapshots.push(...file.failedSnapshots)
+    passedSnapshots.push(...file.passedSnapshots)
+    newSnapshots.push(...file.newSnapshots)
     for (const suite of file.suites) {
       if (suite.testErrors || suite.otherErrors.length) {
         errorSuiteCount++
@@ -23,5 +30,9 @@ export function getStats (results: RunTestFileResult[]) {
     testCount,
     errorTestCount,
     suites,
+    snapshotCount: failedSnapshots.length + passedSnapshots.length + newSnapshots.length,
+    failedSnapshots,
+    passedSnapshots,
+    newSnapshots,
   }
 }
diff --git a/packages/peeky-runner/src/types.ts b/packages/peeky-runner/src/types.ts
index a40ed54..2c9405d 100644
--- a/packages/peeky-runner/src/types.ts
+++ b/packages/peeky-runner/src/types.ts
@@ -1,12 +1,14 @@
 import type { SerializablePeekyConfig } from '@peeky/config'
 import type { Awaitable } from '@peeky/utils'
 import { FileCoverage } from './runtime/coverage.js'
+import { Snapshot } from './snapshot/types.js'
 
 export interface RunTestFileOptions {
   entry: string
   config: SerializablePeekyConfig
   coverage: CoverageOptions
   clearDeps?: string[]
+  updateSnapshots?: boolean
 }
 
 export interface CoverageOptions {
@@ -18,6 +20,7 @@ export interface Context {
   options: RunTestFileOptions
   suites: TestSuite[]
   pragma: Record<string, any>
+  snapshots: Snapshot[]
 }
 
 export interface TestSuite {
@@ -43,6 +46,8 @@ export interface Test {
   handler: () => unknown
   error: Error
   flag: TestFlag
+  failedSnapshots: number
+  snapshots: Snapshot[]
   duration?: number
 }
 
@@ -86,6 +91,11 @@ interface ErrorSummaryPayload {
   testCount: number
 }
 
+interface SnapshotSummaryPayload {
+  snapshotCount: number
+  failedSnapshots: Snapshot[]
+}
+
 interface CoverageSummaryPayload {
   uncoveredFiles: FileCoverage[]
   partiallyCoveredFiles: FileCoverage[]
@@ -102,6 +112,10 @@ interface SummaryPayload {
   errorSuiteCount: number
   testCount: number
   errorTestCount: number
+  snapshotCount: number
+  failedSnapshotCount: number
+  updatedSnapshotCount: number
+  newSnapshotCount: number
 }
 
 export interface Reporter {
@@ -112,6 +126,7 @@ export interface Reporter {
   testSuccess?: (payload: TestInfoPayload) => unknown
   testFail?: (payload: TestInfoPayload) => unknown
   errorSummary?: (payload: ErrorSummaryPayload) => unknown
+  snapshotSummary?: (payload: SnapshotSummaryPayload) => unknown
   coverageSummary?: (payload: CoverageSummaryPayload) => unknown
   summary?: (payload: SummaryPayload) => unknown
 }
diff --git a/packages/peeky-server/src/generated/nexus-typegen.ts b/packages/peeky-server/src/generated/nexus-typegen.ts
index 7830cd4..83337ce 100644
--- a/packages/peeky-server/src/generated/nexus-typegen.ts
+++ b/packages/peeky-server/src/generated/nexus-typegen.ts
@@ -27,6 +27,9 @@ export interface NexusGenInputs {
     darkMode: boolean; // Boolean!
     watch: boolean; // Boolean!
   }
+  UpdateSnapshotInput: { // input type
+    id: string; // ID!
+  }
 }
 
 export interface NexusGenEnums {
@@ -56,14 +59,25 @@ export interface NexusGenObjects {
     id: string; // ID!
     watch: boolean; // Boolean!
   }
+  Snapshot: { // root type
+    col?: number | null; // Int
+    content: string; // String!
+    id: string; // ID!
+    line?: number | null; // Int
+    newContent?: string | null; // String
+    title: string; // String!
+    updated?: boolean | null; // Boolean
+  }
   Subscription: {};
   Test: { // root type
     duration?: number | null; // Float
     error?: NexusGenRootTypes['TestError'] | null; // TestError
+    failedSnapshotCount: number; // Int!
     flag?: NexusGenEnums['TestFlag'] | null; // TestFlag
     id: string; // ID!
     logs: NexusGenRootTypes['TestLog'][]; // [TestLog!]!
     slug: string; // String!
+    snapshots: NexusGenRootTypes['Snapshot'][]; // [Snapshot!]!
     status: NexusGenEnums['Status']; // Status!
     title: string; // String!
   }
@@ -106,6 +120,7 @@ export interface NexusGenFieldTypes {
     openTestFileInEditor: boolean | null; // Boolean
     startRun: NexusGenRootTypes['Run']; // Run!
     updateSettings: NexusGenRootTypes['Settings']; // Settings!
+    updateSnapshot: NexusGenRootTypes['Snapshot'] | null; // Snapshot
   }
   Query: { // field return type
     lastRun: NexusGenRootTypes['Run'] | null; // Run
@@ -118,7 +133,10 @@ export interface NexusGenFieldTypes {
   Run: { // field return type
     duration: number | null; // Float
     emoji: string; // String!
+    failedSnapshots: NexusGenRootTypes['Snapshot'][]; // [Snapshot!]!
     id: string; // ID!
+    newSnapshots: NexusGenRootTypes['Snapshot'][]; // [Snapshot!]!
+    passedSnapshots: NexusGenRootTypes['Snapshot'][]; // [Snapshot!]!
     previousErrorRunTestFiles: NexusGenRootTypes['RunTestFile'][]; // [RunTestFile!]!
     progress: number; // Float!
     runTestFile: NexusGenRootTypes['RunTestFile'] | null; // RunTestFile
@@ -146,6 +164,15 @@ export interface NexusGenFieldTypes {
     id: string; // ID!
     watch: boolean; // Boolean!
   }
+  Snapshot: { // field return type
+    col: number | null; // Int
+    content: string; // String!
+    id: string; // ID!
+    line: number | null; // Int
+    newContent: string | null; // String
+    title: string; // String!
+    updated: boolean | null; // Boolean
+  }
   Subscription: { // field return type
     runAdded: NexusGenRootTypes['Run']; // Run!
     runRemoved: NexusGenRootTypes['Run']; // Run!
@@ -163,11 +190,14 @@ export interface NexusGenFieldTypes {
   Test: { // field return type
     duration: number | null; // Float
     error: NexusGenRootTypes['TestError'] | null; // TestError
+    failedSnapshotCount: number; // Int!
     flag: NexusGenEnums['TestFlag'] | null; // TestFlag
     hasLogs: boolean; // Boolean!
     id: string; // ID!
     logs: NexusGenRootTypes['TestLog'][]; // [TestLog!]!
     slug: string; // String!
+    snapshotCount: number; // Int!
+    snapshots: NexusGenRootTypes['Snapshot'][]; // [Snapshot!]!
     status: NexusGenEnums['Status']; // Status!
     title: string; // String!
   }
@@ -212,6 +242,7 @@ export interface NexusGenFieldTypeNames {
     openTestFileInEditor: 'Boolean'
     startRun: 'Run'
     updateSettings: 'Settings'
+    updateSnapshot: 'Snapshot'
   }
   Query: { // field return type name
     lastRun: 'Run'
@@ -224,7 +255,10 @@ export interface NexusGenFieldTypeNames {
   Run: { // field return type name
     duration: 'Float'
     emoji: 'String'
+    failedSnapshots: 'Snapshot'
     id: 'ID'
+    newSnapshots: 'Snapshot'
+    passedSnapshots: 'Snapshot'
     previousErrorRunTestFiles: 'RunTestFile'
     progress: 'Float'
     runTestFile: 'RunTestFile'
@@ -252,6 +286,15 @@ export interface NexusGenFieldTypeNames {
     id: 'ID'
     watch: 'Boolean'
   }
+  Snapshot: { // field return type name
+    col: 'Int'
+    content: 'String'
+    id: 'ID'
+    line: 'Int'
+    newContent: 'String'
+    title: 'String'
+    updated: 'Boolean'
+  }
   Subscription: { // field return type name
     runAdded: 'Run'
     runRemoved: 'Run'
@@ -269,11 +312,14 @@ export interface NexusGenFieldTypeNames {
   Test: { // field return type name
     duration: 'Float'
     error: 'TestError'
+    failedSnapshotCount: 'Int'
     flag: 'TestFlag'
     hasLogs: 'Boolean'
     id: 'ID'
     logs: 'TestLog'
     slug: 'String'
+    snapshotCount: 'Int'
+    snapshots: 'Snapshot'
     status: 'Status'
     title: 'String'
   }
@@ -331,6 +377,9 @@ export interface NexusGenArgTypes {
     updateSettings: { // args
       input: NexusGenInputs['UpdateSettingsInput']; // UpdateSettingsInput!
     }
+    updateSnapshot: { // args
+      input: NexusGenInputs['UpdateSnapshotInput']; // UpdateSnapshotInput!
+    }
   }
   Query: {
     run: { // args
diff --git a/packages/peeky-server/src/generated/schema.graphql b/packages/peeky-server/src/generated/schema.graphql
index 6db98a0..b0c53a6 100644
--- a/packages/peeky-server/src/generated/schema.graphql
+++ b/packages/peeky-server/src/generated/schema.graphql
@@ -13,6 +13,7 @@ type Mutation {
   openTestFileInEditor(col: Int!, id: ID!, line: Int!): Boolean
   startRun(input: StartRunInput!): Run!
   updateSettings(input: UpdateSettingsInput!): Settings!
+  updateSnapshot(input: UpdateSnapshotInput!): Snapshot
 }
 
 type Query {
@@ -27,7 +28,10 @@ type Query {
 type Run {
   duration: Float
   emoji: String!
+  failedSnapshots: [Snapshot!]!
   id: ID!
+  newSnapshots: [Snapshot!]!
+  passedSnapshots: [Snapshot!]!
   previousErrorRunTestFiles: [RunTestFile!]!
   progress: Float!
   runTestFile(slug: String!): RunTestFile
@@ -59,6 +63,16 @@ type Settings {
   watch: Boolean!
 }
 
+type Snapshot {
+  col: Int
+  content: String!
+  id: ID!
+  line: Int
+  newContent: String
+  title: String!
+  updated: Boolean
+}
+
 input StartRunInput {
   testFileIds: [String!]
 }
@@ -90,11 +104,14 @@ type Subscription {
 type Test {
   duration: Float
   error: TestError
+  failedSnapshotCount: Int!
   flag: TestFlag
   hasLogs: Boolean!
   id: ID!
   logs: [TestLog!]!
   slug: String!
+  snapshotCount: Int!
+  snapshots: [Snapshot!]!
   status: Status!
   title: String!
 }
@@ -149,3 +166,7 @@ input UpdateSettingsInput {
   darkMode: Boolean!
   watch: Boolean!
 }
+
+input UpdateSnapshotInput {
+  id: ID!
+}
diff --git a/packages/peeky-server/src/schema/Run.ts b/packages/peeky-server/src/schema/Run.ts
index e640303..d07b45b 100644
--- a/packages/peeky-server/src/schema/Run.ts
+++ b/packages/peeky-server/src/schema/Run.ts
@@ -17,6 +17,8 @@ import { getErrorPosition, getSrcFile, formatRunTestFileErrorMessage } from '../
 import { settings } from './Settings.js'
 import { mightRunOnChangedFiles } from '../watch.js'
 import { toProgramConfig } from '@peeky/config'
+import { Snapshot } from '@peeky/runner/dist/snapshot/types'
+import { addSnapshots, clearSnapshots, SnapshotData } from './Snapshot.js'
 
 const __filename = fileURLToPath(import.meta.url)
 
@@ -162,6 +164,9 @@ export interface RunData {
   duration: number
   runTestFiles: RunTestFileData[]
   previousErrorRunTestFiles: RunTestFileData[]
+  failedSnapshots: Snapshot[]
+  passedSnapshots: Snapshot[]
+  newSnapshots: Snapshot[]
 }
 
 export let runs: RunData[] = []
@@ -202,6 +207,9 @@ export async function createRun (ctx: Context, options: CreateRunOptions) {
     duration: null,
     runTestFiles: runTestFiles,
     previousErrorRunTestFiles,
+    failedSnapshots: [],
+    passedSnapshots: [],
+    newSnapshots: [],
   }
   runs.push(run)
 
@@ -244,6 +252,8 @@ export async function startRun (ctx: Context, id: string) {
     updateRunTestFile(ctx, run.id, f.id, { status: 'in_progress' })
   }))
 
+  clearSnapshots()
+
   const time = performance.now()
   if (!runner) {
     runner = await setupRunner({
@@ -315,6 +325,31 @@ export async function startRun (ctx: Context, id: string) {
           }
         })
       }
+    } else if (message.method === 'onTestSnapshotsProcessed') {
+      const [suiteId, testId, snapshots] = message.args
+      const testFile = testSuites.find(s => s.id === suiteId).runTestFile.testFile
+      await updateTest(ctx, suiteId, testId, (test) => {
+        const list:SnapshotData[] = snapshots.map(s => {
+          const result: SnapshotData = {
+            ...s,
+            test,
+          }
+          if (s.error) {
+            const { line, col } = getErrorPosition(testFile.relativePath, s.error.stack)
+            Object.assign(result, {
+              line,
+              col,
+            })
+          }
+          return result
+        })
+        test.snapshots.push(...list)
+        addSnapshots(list)
+        return {
+          snapshots: test.snapshots,
+          failedSnapshotCount: test.failedSnapshotCount + snapshots.filter(s => !!s.newContent).length,
+        }
+      })
     }
   })
 
@@ -359,6 +394,9 @@ export async function startRun (ctx: Context, id: string) {
     await updateRun(ctx, id, {
       status: stats.errorTestCount > 0 ? 'error' : 'success',
       duration: performance.now() - time,
+      failedSnapshots: stats.failedSnapshots,
+      passedSnapshots: stats.passedSnapshots,
+      newSnapshots: stats.newSnapshots,
     })
 
     if (settings.watch) {
diff --git a/packages/peeky-server/src/schema/Snapshot.ts b/packages/peeky-server/src/schema/Snapshot.ts
new file mode 100644
index 0000000..cfdb719
--- /dev/null
+++ b/packages/peeky-server/src/schema/Snapshot.ts
@@ -0,0 +1,108 @@
+import { arg, extendType, inputObjectType, nonNull, objectType } from 'nexus'
+import { readSnapshots, writeSnapshots } from '@peeky/runner'
+import type { Context } from '../context.js'
+import { TestData } from './Test.js'
+
+export const Snapshot = objectType({
+  name: 'Snapshot',
+  definition (t) {
+    t.nonNull.id('id')
+    t.nonNull.string('title')
+    t.nonNull.string('content')
+    t.string('newContent')
+    t.int('line')
+    t.int('col')
+    t.boolean('updated')
+  },
+})
+
+export const SnapshotExtendTest = extendType({
+  type: 'Test',
+  definition (t) {
+    t.nonNull.list.nonNull.field('snapshots', {
+      type: Snapshot,
+    })
+    t.nonNull.int('failedSnapshotCount')
+    t.nonNull.int('snapshotCount', {
+      resolve: (test) => test.snapshots.length,
+    })
+  },
+})
+
+export const SnapshotExtendRun = extendType({
+  type: 'Run',
+  definition (t) {
+    t.nonNull.list.nonNull.field('failedSnapshots', {
+      type: Snapshot,
+    })
+    t.nonNull.list.nonNull.field('passedSnapshots', {
+      type: Snapshot,
+    })
+    t.nonNull.list.nonNull.field('newSnapshots', {
+      type: Snapshot,
+    })
+  },
+})
+
+export const SnapshotMutation = extendType({
+  type: 'Mutation',
+  definition (t) {
+    t.field('updateSnapshot', {
+      type: Snapshot,
+      args: {
+        input: arg({
+          type: nonNull(UpdateSnapshotInput),
+        }),
+      },
+      resolve: async (_, { input }, ctx) => {
+        const snapshot = await getSnapshot(input.id)
+        await updateSnapshot(ctx, snapshot)
+        snapshot.updated = true
+        snapshot.test.failedSnapshotCount--
+        return snapshot
+      },
+    })
+  },
+})
+
+export const UpdateSnapshotInput = inputObjectType({
+  name: 'UpdateSnapshotInput',
+  definition (t) {
+    t.nonNull.id('id')
+  },
+})
+
+export interface SnapshotData {
+  id: string
+  title: string
+  content: string
+  testFile: string
+  newContent?: string
+  line?: number
+  col?: number
+  updated?: boolean
+  test: TestData
+}
+
+let snapshots: SnapshotData[] = []
+
+export async function getSnapshot (id: string): Promise<SnapshotData> {
+  return snapshots.find(s => s.id === id)
+}
+
+export function clearSnapshots () {
+  snapshots = []
+}
+
+export function addSnapshots (s: SnapshotData[]) {
+  snapshots.push(...s)
+}
+
+export async function updateSnapshot (ctx: Context, snapshot: SnapshotData) {
+  const snapshots = await readSnapshots(snapshot.testFile)
+  const existingSnapshot = snapshots.find(s => s.id === snapshot.id)
+  Object.assign(existingSnapshot, {
+    newContent: snapshot.newContent,
+  })
+  await writeSnapshots(snapshot.testFile, snapshots, true)
+}
diff --git a/packages/peeky-server/src/schema/Test.ts b/packages/peeky-server/src/schema/Test.ts
index d393860..cda8b4e 100644
--- a/packages/peeky-server/src/schema/Test.ts
+++ b/packages/peeky-server/src/schema/Test.ts
@@ -7,6 +7,7 @@ import type { Context } from '../context'
 import { getRunId } from './Run.js'
 import { Status, StatusEnum } from './Status.js'
 import { getTestSuite, TestSuiteData } from './TestSuite.js'
+import { SnapshotData } from './Snapshot.js'
 
 // @ts-expect-error ansi_up doesn't support Node esm correctly
 const AnsiUp = AnsiUpPackage.default as typeof AnsiUpPackage
@@ -175,6 +176,8 @@ export interface TestData {
   error: TestErrorData
   flag: TestFlag
   logs: TestLogData[]
+  snapshots: SnapshotData[]
+  failedSnapshotCount: number
 }
 
 export interface TestLogData {
@@ -213,6 +216,8 @@ export async function createTest (ctx: Context, options: CreateTestOptions) {
     duration: null,
     error: null,
     logs: [],
+    snapshots: [],
+    failedSnapshotCount: 0,
   }
   ctx.pubsub.publish(TestAdded, {
     test,
diff --git a/packages/peeky-server/src/schema/index.ts b/packages/peeky-server/src/schema/index.ts
index a7f70d4..35c9d7e 100644
--- a/packages/peeky-server/src/schema/index.ts
+++ b/packages/peeky-server/src/schema/index.ts
@@ -5,3 +5,4 @@ export * from './Test.js'
 export * from './Run.js'
 export * from './RunTestFile.js'
 export * from './Settings.js'
+export * from './Snapshot.js'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 79200b0..1f5b0ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -228,6 +228,7 @@ importers:
       '@akryum/workerpool': ^6.0.5-alpha.2
       '@peeky/config': ^0.9.3
       '@peeky/utils': ^0.9.3
+      '@types/fs-extra': ^9.0.13
       '@types/lodash': ^4.14.178
       '@types/node': ^14.14.21
       '@types/shortid': ^0.0.29
@@ -236,17 +237,20 @@ importers:
       chalk: ^5.0.0
       collect-v8-coverage: ^1.0.1
       consola: ^2.15.0
+      diffable-html: ^5.0.0
       expect: ^27.0.6
       fast-copy: ^2.1.1
       fast-glob: ^3.2.7
       fs-extra: ^10.0.0
       fs-monkey: ^1.0.3
       happy-dom: ^2.24.4
+      jest-diff: ^27.4.2
       lodash: ^4.17.21
       memfs: ^3.2.0
       mlly: ^0.3.16
       pathe: ^0.2.0
       pragma: ^1.0.0
+      pretty-format: ^27.4.2
       reactive-fs: ^0.4.1
       shortid: ^2.2.16
       sinon: ^9.2.3
@@ -265,17 +269,20 @@ importers:
       chalk: 5.0.0
       collect-v8-coverage: 1.0.1
       consola: 2.15.3
+      diffable-html: 5.0.0
       expect: 27.4.2
       fast-copy: 2.1.1
       fast-glob: 3.2.7
       fs-extra: 10.0.0
       fs-monkey: 1.0.3
       happy-dom: 2.24.4
+      jest-diff: 27.4.2
       lodash: 4.17.21
       memfs: 3.4.0
       mlly: 0.3.16
       pathe: 0.2.0
       pragma: 1.0.0
+      pretty-format: 27.4.2
       reactive-fs: 0.4.1
       shortid: 2.2.16
       sinon: 9.2.4
@@ -285,6 +292,7 @@ importers:
       tinypool: 0.0.5
       vite: 2.7.1
     devDependencies:
+      '@types/fs-extra': 9.0.13
       '@types/lodash': 4.14.178
       '@types/node': 14.18.0
       '@types/shortid': 0.0.29
@@ -1357,6 +1365,12 @@ packages:
       '@types/node': 14.18.0
     dev: false
 
+  /@types/fs-extra/9.0.13:
+    resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
+    dependencies:
+      '@types/node': 14.18.0
+    dev: true
+
   /@types/http-assert/1.5.3:
     resolution: {integrity: sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==}
     dev: false
@@ -3857,6 +3871,12 @@ packages:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
+  /diffable-html/5.0.0:
+    resolution: {integrity: sha512-BymfWdoIv53XDp/sINPyngxiyJr7ygmAoUN7nIlPC7E+jiLvPdVIZteG4btCaB5Nyf8CMyMxp8r4Vi2r1FtSsA==}
+    dependencies:
+      htmlparser2: 3.10.1
+    dev: false
+
   /diffie-hellman/5.0.3:
     resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
     dependencies:
@@ -3894,11 +3914,39 @@ packages:
     resolution: {integrity: sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==}
     dev: true
 
+  /dom-serializer/0.2.2:
+    resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
+    dependencies:
+      domelementtype: 2.2.0
+      entities: 2.2.0
+    dev: false
+
   /domain-browser/1.2.0:
     resolution: {integrity: sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==}
     engines: {node: '>=0.4', npm: '>=1.2'}
     dev: true
 
+  /domelementtype/1.3.1:
+    resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
+    dev: false
+
+  /domelementtype/2.2.0:
+    resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==}
+    dev: false
+
+  /domhandler/2.4.2:
+    resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
+    dependencies:
+      domelementtype: 1.3.1
+    dev: false
+
+  /domutils/1.7.0:
+    resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
+    dependencies:
+      dom-serializer: 0.2.2
+      domelementtype: 1.3.1
+    dev: false
+
   /dot-prop/5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -3976,6 +4024,14 @@ packages:
       ansi-colors: 4.1.1
     dev: true
 
+  /entities/1.1.2:
+    resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
+    dev: false
+
+  /entities/2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+    dev: false
+
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -5098,6 +5154,17 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /htmlparser2/3.10.1:
+    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
+    dependencies:
+      domelementtype: 1.3.1
+      domhandler: 2.4.2
+      domutils: 1.7.0
+      entities: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: false
+
   /http-basic/8.1.3:
     resolution: {integrity: sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==}
     engines: {node: '>=6.0.0'}
@@ -6842,7 +6909,6 @@ packages:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
-    dev: true
 
   /readdirp/3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
@@ -7283,7 +7349,6 @@ packages:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: true
 
   /strip-ansi/3.0.1:
     resolution: {integrity: sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=}