test: replace toMatchInlineSnapshot with meaningful assertions

components/__tests__/report-button.test.tsx

@@ -12,40 +12,9 @@ describe("ReportButton", () => {
   const province: Province = provinceBuilder();
   const contact: Contact = province.data[0];
   it("renders correctly", () => {
-    const { container } = render(
-      <ReportButton contact={contact} provinceName={province.name} />,
-    );
+    render(<ReportButton contact={contact} provinceName={province.name} />);
 
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      <div
-        class="flex justify-center mt-4"
-      >
-        <button
-          aria-label="Laporkan kesalahan"
-          class="inline-flex flex-row px-4 py-2 text-sm rounded-md items-center justify-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-700 bg-blue-100 hover:bg-blue-200 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-75 relative z-10"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="-ml-1 mr-2 h-5 w-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-          <span>
-            Laporkan kesalahan
-          </span>
-        </button>
-      </div>
-    `);
+    expect(screen.getByText(/laporkan kesalahan/i)).toBeVisible();
   });
 
   it("opens the form link with correct query params on click", () => {

components/__tests__/search-filter.test.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { SearchFilter } from "../search-filter";
 
 describe("SearchFilter", () => {
   const handleFilterChange = jest.fn();
   const handleSortChange = jest.fn();
 
   it("renders correctly", () => {
-    const { container } = render(
+    render(
       <SearchFilter
         filterItems={{
           kebutuhan: {
@@ -32,58 +32,11 @@ describe("SearchFilter", () => {
       />,
     );
 
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      <div
-        class="grid grid-cols-2 gap-4"
-      >
-        <div
-          class="space-y-1"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700"
-            for="filter-kebutuhan"
-          >
-            Kategori
-          </label>
-          <select
-            class="inline-block shadow-sm focus:ring-blue-500 focus:border-blue-500 w-full text-sm border-gray-300 rounded-md"
-            id="filter-kebutuhan"
-            name="kebutuhan"
-            title="Kategori"
-          >
-            <option
-              value=""
-            >
-              Semua
-            </option>
-            <option
-              value="Ambulans"
-            >
-              Ambulans
-            </option>
-            <option
-              value="Donor plasma"
-            >
-              Donor plasma
-            </option>
-            <option
-              value="Kontak penting"
-            >
-              Kontak penting
-            </option>
-            <option
-              value="Rumah sakit"
-            >
-              Rumah sakit
-            </option>
-          </select>
-        </div>
-      </div>
-    `);
+    expect(screen.getByText(/kategori/i)).toBeVisible();
   });
 
   it("renders non existing filter correctly", () => {
-    const { container } = render(
+    render(
       <SearchFilter
         filterItems={{
           kebutuhan: {
@@ -107,58 +60,7 @@ describe("SearchFilter", () => {
       />,
     );
 
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      <div
-        class="grid grid-cols-2 gap-4"
-      >
-        <div
-          class="space-y-1"
-        >
-          <label
-            class="block text-sm font-medium text-gray-700"
-            for="filter-kebutuhan"
-          >
-            Kategori
-          </label>
-          <select
-            class="inline-block shadow-sm focus:ring-blue-500 focus:border-blue-500 w-full text-sm border-gray-300 rounded-md"
-            id="filter-kebutuhan"
-            name="kebutuhan"
-            title="Kategori"
-          >
-            <option
-              value=""
-            >
-              Semua
-            </option>
-            <option
-              value="Oksigen"
-            >
-              Oksigen
-            </option>
-            <option
-              value="Ambulans"
-            >
-              Ambulans
-            </option>
-            <option
-              value="Donor plasma"
-            >
-              Donor plasma
-            </option>
-            <option
-              value="Kontak penting"
-            >
-              Kontak penting
-            </option>
-            <option
-              value="Rumah sakit"
-            >
-              Rumah sakit
-            </option>
-          </select>
-        </div>
-      </div>
-    `);
+    expect(screen.getByText(/kategori/i)).toBeVisible();
+    expect(screen.getAllByRole("option")).toHaveLength(6);
   });
 });

components/__tests__/search-form.test.tsx

@@ -8,61 +8,16 @@ describe("SearchForm", () => {
   const handleSubmitKeyword = jest.fn();
 
   it("renders correctly", () => {
-    const { container } = render(
+    render(
       <SearchForm
         checkDocSize={true}
         itemName="provinsi"
         onSubmitKeywords={handleSubmitKeyword}
       />,
     );
 
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      <form
-        class="pb-8 space-y-4"
-      >
-        <div
-          class="flex flex-row items-end"
-        >
-          <div
-            class="flex flex-1 items-center mt-1"
-          >
-            <div
-              class="space-y-1 flex-1"
-            >
-              <label
-                class="block text-sm font-medium text-gray-700"
-                for="keywordsInput"
-              >
-                Cari 
-                provinsi
-                :
-              </label>
-              <div
-                class="flex rounded-md shadow-sm w-full"
-              >
-                <input
-                  autocomplete="off"
-                  class="first:rounded-l-md last:rounded-r-md focus:ring-blue-500 focus:border-blue-500 block w-full text-sm border-gray-300 focus:z-10"
-                  id="keywordsInput"
-                  type="text"
-                  value=""
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="flex flex-row mt-0 ml-2"
-          >
-            <button
-              class="flex flex-row px-4 py-2 text-sm rounded-md items-center justify-center border border-transparent font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-75 flex-1"
-              type="submit"
-            >
-              Cari
-            </button>
-          </div>
-        </div>
-      </form>
-    `);
+    const searchForm = screen.getByRole("textbox", { name: /cari provinsi/i });
+    expect(searchForm).toBeVisible();
   });
 
   it("has the correct form label based on type", () => {