docs: vitest

_plugins/docusaurus.rb

@@ -41,6 +41,18 @@ def system!(*args)
   system!("mkdir -p _site/jest/troubleshooting")
   system!("cp docusaurus/build/jest/troubleshooting/index.html _site/jest/troubleshooting")
 
+  system!("mkdir -p _site/vitest/guide")
+  system!("cp docusaurus/build/vitest/guide/index.html _site/vitest/guide")
+
+  system!("mkdir -p _site/vitest/reference")
+  system!("cp docusaurus/build/vitest/reference/index.html _site/vitest/reference")
+
+  system!("mkdir -p _site/vitest/cookbook")
+  system!("cp docusaurus/build/vitest/cookbook/index.html _site/vitest/cookbook")
+
+  system!("mkdir -p _site/vitest/troubleshooting")
+  system!("cp docusaurus/build/vitest/troubleshooting/index.html _site/vitest/troubleshooting")
+
   system!("mkdir -p _site/integration")
   system!("cp docusaurus/build/integration/index.html _site/integration") # redirect to /
   system!("cp docusaurus/build/index.html _site")

docusaurus/docs/cypress/troubleshooting.md

@@ -36,6 +36,8 @@ export NODE_OPTIONS=--max_old_space_size=4096
 npx knapsack-pro-jest
 
 npx knapsack-pro-cypress
+
+npx knapsack-pro-vitest
 ```
 
 ## Debug Knapsack Pro on your development environment/machine

docusaurus/docs/index.mdx

@@ -5,6 +5,7 @@ pagination_next: overview/index
 
 import api from "@site/static/img/api.png";
 import javascript from "@site/static/img/javascript.png"
+import Vitest from "@site/static/img/vitest.svg"
 import jest from "@site/static/img/jest.jpg"
 import cypress from "@site/static/img/cypress.jpg"
 import ruby from "@site/static/img/ruby.png"
@@ -20,15 +21,15 @@ If you have questions, feel free to [contact us](https://knapsackpro.com/contact
 ## Overview
 
 <div className="grid">
-<a href="/overview/" className="cell">
-<div className="cell__image"><img width="70" height="70" src={knapsack}></img></div>
+<a href="/overview/" className="cell cell--fixed">
+<span className="cell__image"><img width="70" height="70" src={knapsack}></img></span>
 <h2 className="cell__title">Knapsack Overview</h2>
 </a>
 </div>
 
 ## Libraries
 
-<div className="grid">
+<div className="grid-4">
 <a href="/knapsack_pro-ruby/guide/" className="cell">
 <div className="cell__image cell__image--ruby"><img width="60" height="60" src={ruby}></img></div>
 <h2 className="cell__title">Ruby</h2>
@@ -43,6 +44,11 @@ If you have questions, feel free to [contact us](https://knapsackpro.com/contact
 <div className="cell__image"><img width="70" height="70" src={jest}></img></div>
 <h2 className="cell__title">Jest</h2>
 </a>
+
+<a href="/vitest/guide/" className="cell">
+<div className="cell__image"><Vitest className="w-full h-auto center" /></div>
+<h2 className="cell__title">Vitest</h2>
+</a>
 </div>
 
 Can't see your language/testing framework above? [Let us know](https://docs.google.com/forms/d/e/1FAIpQLSe7Z6k__VczmRMmXykjA5i2MVEA3nEJ90gbiIeCRjecWhPOig/viewform?hl=en).
@@ -52,12 +58,12 @@ Can't see your language/testing framework above? [Let us know](https://docs.goog
 You can still use Knapsack Pro by writing your integration on top of the JavaScript SDK or using the Knapsack Pro API:
 
 <div className="grid">
-<a href="https://docs.knapsackpro.com/2020/how-to-build-native-integration-with-knapsack-pro-api-to-run-tests-in-parallel-for-any-test-runner-testing-framework" target="_blank" rel="noopener noreferrer" className="cell">
+<a href="https://docs.knapsackpro.com/2020/how-to-build-native-integration-with-knapsack-pro-api-to-run-tests-in-parallel-for-any-test-runner-testing-framework" target="_blank" rel="noopener noreferrer" className="cell cell--fixed">
 <div className="cell__image"><img width="70" height="70" src={javascript}></img></div>
 <h2 className="cell__title">JavaScript / TypeScript</h2>
 </a>
 
-<a href="https://docs.knapsackpro.com/2021/how-to-build-knapsack-pro-api-client-from-scratch-in-any-programming-language" target="_blank" rel="noopener noreferrer" className="cell">
+<a href="https://docs.knapsackpro.com/2021/how-to-build-knapsack-pro-api-client-from-scratch-in-any-programming-language" target="_blank" rel="noopener noreferrer" className="cell cell--fixed">
 <div className="cell__image"><img width="70" height="70" src={api}></img></div>
 <h2 className="cell__title">Other Language</h2>
 </a>
@@ -66,7 +72,7 @@ You can still use Knapsack Pro by writing your integration on top of the JavaScr
 ## Troubleshooting
 
 <div className="grid">
-<a href="/troubleshooting/" className="cell" style={{width: 'auto'}}>
+<a href="/troubleshooting/" className="cell cell--fixed" style={{width: 'auto'}}>
 <div className="cell__image"><img width="70" height="70" src={troubleshooting}></img></div>
 <h2 className="cell__title">Troubleshooting</h2>
 </a>

docusaurus/docs/jest/troubleshooting.md

@@ -27,6 +27,8 @@ export NODE_OPTIONS=--max_old_space_size=4096
 npx knapsack-pro-jest
 
 npx knapsack-pro-cypress
+
+npx knapsack-pro-vitest
 ```
 
 ## Debug Knapsack Pro on your development environment/machine

docusaurus/docs/overview/index.mdx

@@ -20,7 +20,7 @@ Knapsack Pro wraps your current test runner(s) and works with your existing CI i
 - Tracks your CI builds to detect bottlenecks
 - Does not have access to your source code and collects minimal test data (with opt-in encryption)
 - Enables you to export historical metrics about your CI builds
-- Supports out-of-the-box any Ruby test runners, Cypress, Jest (and provides both SDK and API to integrate with any other language)
+- Supports out-of-the-box any Ruby test runners, Cypress, Jest, Vitest (and provides both SDK and API to integrate with any other language)
 - Replaces local dependencies like Redis with an API and runs your tests regardless of network problems
 
 <Architecture className="w-full h-auto center" />

docusaurus/docs/troubleshooting/index.mdx

@@ -6,6 +6,7 @@ pagination_next: null
 import ruby from "@site/static/img/ruby.png"
 import cypress from "@site/static/img/cypress.jpg"
 import jest from "@site/static/img/jest.jpg"
+import Vitest from "@site/static/img/vitest.svg"
 
 # Troubleshooting
 
@@ -15,7 +16,7 @@ If you are utilizing two CI providers simultaneously, for example, CircleCI and
 
 ## Troubleshooting libraries
 
-<div className="grid">
+<div className="grid-4">
 <a href="/ruby/troubleshooting/" className="cell">
 <div className="cell__image cell__image--ruby"><img width="60" height="60" src={ruby}></img></div>
 <h2 className="cell__title">Ruby</h2>
@@ -30,4 +31,9 @@ If you are utilizing two CI providers simultaneously, for example, CircleCI and
 <div className="cell__image"><img width="70" height="70" src={jest}></img></div>
 <h2 className="cell__title">Jest</h2>
 </a>
+
+<a href="/vitest/troubleshooting/" className="cell">
+<div className="cell__image"><Vitest className="w-full h-auto center" /></div>
+<h2 className="cell__title">Vitest</h2>
+</a>
 </div>

docusaurus/docs/vitest/cookbook.md

@@ -0,0 +1,45 @@
+---
+pagination_next: null
+pagination_prev: null
+---
+
+# Vitest Cookbook
+
+cli args vitest supported?
+what needs to be done for coverage KNAPSACK_PRO_COVERAGE_DIRECTORY and --coverage and config? https://github.com/KnapsackPro/knapsack-pro-js/blob/main/packages/vitest-example-test-suite/vitest.config.ts
+
+## Use a Jest config file
+
+:::caution
+
+To filter tests use [`KNAPSACK_PRO_TEST_FILE_PATTERN`](reference.md#knapsack_pro_test_file_pattern).
+
+:::
+
+You can pass it with a [command-line argument](reference.md#command-line-arguments):
+
+```bash
+npx knapsack-pro-jest --config=jest.config.e2e.js
+```
+
+## Generate code coverage reports
+
+```bash
+export KNAPSACK_PRO_COVERAGE_DIRECTORY=coverage
+
+npx knapsack-pro-jest --coverage
+```
+
+Knapsack Pro will generate one coverage report for each batch of tests executed on the CI node. To merge the reports you may consider [this script](https://github.com/facebook/jest/issues/2418#issuecomment-478932514).
+
+## Generate XML reports
+
+You can generate [jest-junit](https://github.com/jest-community/jest-junit) reports with:
+
+```bash
+export JEST_JUNIT_UNIQUE_OUTPUT_NAME=true
+
+npx knapsack-pro-jest --ci --reporters=jest-junit
+```
+
+Knapsack Pro will generate one XML reports for each batch of tests executed on the CI node. Some CI providers (e.g., GitLab CI) can merge multiple XML files from parallel CI nodes.