tests: Stabilize screenshot tests and clean up flaky infrastructure (#1220)

* tests: Stabilize screenshot tests and clean up flaky infrastructure

* Update image caption test and refresh screenshots

Updates the Markdown image caption test to use a new caption and image.
Regenerates all related test screenshots to reflect the change.

* Update test scripts to separate snapshot updates in vitest

* Document Vitest usage and remove old screenshot baselines

Add detailed instructions for running and updating Vitest
browser-based unit tests in the README. Remove outdated
screenshot baseline PNGs from __tests__/__screenshots__.

* Update image test to add className and refresh screenshot

Add guidance in README to be selective when updating screenshots.

* Update testing guidelines for React Router and snapshot usage

Author: jderochervlk

.github/workflows/pull-request.yml

@@ -47,8 +47,3 @@ jobs:
         run: yarn playwright install --with-deps
       - name: Vitest
         run: yarn ci:test
-      - name: Commit and Push changes
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: "chore: update vitest screenshots [skip ci]"
-          file_pattern: "**/__screenshots__/**/*.png"

AGENTS.md

@@ -203,12 +203,14 @@ test("renders Image with caption", async () => {
   let screen = await render(
     <div dataTestId="image-wrapper">
       <Markdown.Image
-        src="https://rescript-lang.org/brand/rescript-brandmark.svg" caption="The ReScript logo"
+        className="rounded-lg border border-gray-90/5 text-gray-60"
+        src="https://rescript-lang.org/lp/community-3.avif"
+        caption="A sample image caption"
       />
     </div>,
   )
 
-  let caption = await screen->getByText("The ReScript logo")
+  let caption = await screen->getByText("A sample image caption")
   await element(caption)->toBeVisible
 
   let wrapper = await screen->getByTestId("image-wrapper")
@@ -226,9 +228,6 @@ test("renders Video with caption", async () => {
 
   let caption = await screen->getByText("A sample video")
   await element(caption)->toBeVisible
-
-  let wrapper = await screen->getByTestId("video-wrapper")
-  await element(wrapper)->toMatchScreenshot("markdown-video")
 })
 
 test("renders horizontal rule", async () => {

README.md

@@ -5,9 +5,9 @@ test("desktop secondary navbar shows all doc section links", async () => {
   await viewport(1440, 500)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
       <NavbarSecondary />
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
   let navbar = await screen->getByTestId("navbar-secondary")
@@ -24,9 +24,9 @@ test("mobile secondary navbar shows all links", async () => {
   await viewport(600, 500)
 
   let screen = await render(
-    <BrowserRouter>
+    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
       <NavbarSecondary />
-    </BrowserRouter>,
+    </MemoryRouter>,
   )
 
   let navbar = await screen->getByTestId("navbar-secondary")