From 1e38024765aedaf0339add836dcb631ad48b0cf8 Mon Sep 17 00:00:00 2001
From: Alex Lohr <alexthkloss@web.de>
Date: Wed, 19 Jun 2024 19:20:32 +0200
Subject: [PATCH] testing guide: added benchmark / code coverage (#735)

Co-authored-by: Atila Fassina <atilafassina@gmail.com>
Co-authored-by: Atila Fassina <atila@fassina.eu>
---
 src/routes/guides/testing.mdx | 88 +++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/src/routes/guides/testing.mdx b/src/routes/guides/testing.mdx
index 661499c88..2d02163ba 100644
--- a/src/routes/guides/testing.mdx
+++ b/src/routes/guides/testing.mdx
@@ -494,6 +494,94 @@ return testEffect(done =>
 )
 ```
 
+### Benchmarks
+
+While Solid offers performance simplified, it is good to validate if that promise can be kept.
+Vitest offers an experimental `bench` function to run benchmarks and compare the results inside the same `describe` block;
+for example if you had a `<List>` flow component similar to `<For>`, you could benchmark it like this:
+
+
+```jsx title="list.bench.jsx"
+describe('list rendering', () => {
+  const ITEMS = 1000
+  const renderedFor = new Set()
+  const listFor = Array.from({ length: ITEMS }, (_, i) => i)
+  bench('For', () => new Promise((resolve) => {
+    const ItemFor = (props) => {
+      onMount(() => {
+        renderedFor.add(props.number)
+        if (renderedFor.size === ITEMS) { resolve() }
+      })
+      return <span>{props.number}</span>
+    }
+    render(() => <For each={listFor}>
+      {(item) => <ItemFor number={item} />}
+    </For>)
+  }))
+
+  const renderedList = new Set()
+  const listList = Array.from({ length: ITEMS }, (_, i) => i)
+  bench('List', () => new Promise((resolve) => {
+    const ItemList = (props) => {
+      onMount(() => {
+        renderedList.add(props.number)
+        if (renderedList.size === ITEMS) { resolve() }
+      })
+      return <span>{props.number}</span>
+    }
+    render(() => <List each={listList}>
+      {(item) => <ItemList number={item} />}
+    </List>)
+  }))
+})
+```
+
+Running `[npm|pnpm|yarn] test bench` will then execute the benchmark function:
+
+```ansi frame="none"
+[RUN] v1.4.0 solid-app/src/components/
+
+ ✓ src/components/list.bench.jsx (2) 1364ms
+   ✓ benchmark (2) 1360ms
+     name       hz      min      max     mean      p75      p99     p995     p999      rme  samples
+   · For   60.5492  11.2355  47.9164  16.5155  15.4180  47.9164  47.9164  47.9164  ±13.60%       31   fastest
+   · List  49.7725  16.5441  69.3559  20.0914  18.0349  69.3559  69.3559  69.3559  ±21.37%       25  
+
+[BENCH] Summary
+
+For - src/components/list.bench.tsx > benchmark
+    1.22x faster than List
+```
+
+Please keep in mind that it is very difficult to create meaningful benchmarks.
+The numbers should always be taken with a grain of salt, but can still indicate performance degradations if compared between versions.
+
+
+### Test coverage
+
+While coverage numbers can be misleading, they are used by many projects as a rough measurement of code quality.
+Vitest supports coverage collection. To use it, it needs an extra package:
+
+<TabsCodeBlocks>
+  <div id="npm">
+```bash frame="none"
+npm i -D @vitest/coverage-v8
+```
+  </div>
+  <div id="yarn">
+```bash frame="none"
+yarn add -D @vitest/coverage-v8
+```
+  </div>
+  <div id="pnpm">
+```bash frame="none"
+pnpm i -D @vitest/coverage-v8
+```
+  </div>
+</TabsCodeBlocks>
+
+Also, you need to [set up vitest's coverage feature](https://vitest.dev/guide/coverage.html).
+
 
 ### Integration/E2E testing