diff --git a/packages/reflow/tests/map/index.js b/packages/reflow/tests/map/index.js
new file mode 100644
index 0000000..ee9fce1
--- /dev/null
+++ b/packages/reflow/tests/map/index.js
@@ -0,0 +1,18 @@
+import { reactive } from "@f-stack/functorial";
+import { html, map, on } from "@f-stack/reflow";
+
+export default () => {
+  const values = reactive([0, 1, 2]);
+
+  return html`
+    <button ${on({ click: () => values.push(values.length) })}>append</button>
+
+    <ul>
+      ${map(values, (value, index) => {
+        return html`
+          <li>${index}:${value}</li>
+        `;
+      })}
+    </ul>
+  `;
+};
diff --git a/packages/reflow/tests/map/map.spec.ts b/packages/reflow/tests/map/map.spec.ts
new file mode 100644
index 0000000..4f69d25
--- /dev/null
+++ b/packages/reflow/tests/map/map.spec.ts
@@ -0,0 +1,22 @@
+import { expect, test } from "playwright/test";
+
+test("map", async ({ page }) => {
+  await page.goto("http://localhost:8000/map/index.html");
+
+  const button = page.getByRole("button");
+  const ul = page.getByRole("list");
+  const lis = ul.locator("li");
+
+  await expect(lis).toHaveCount(3);
+  await expect(lis.nth(0)).toHaveText("0:0");
+  await expect(lis.nth(1)).toHaveText("1:1");
+  await expect(lis.nth(2)).toHaveText("2:2");
+
+  await button.click();
+  await expect(lis).toHaveCount(4);
+  await expect(lis.nth(3)).toHaveText("3:3");
+
+  await button.click();
+  await expect(lis).toHaveCount(5);
+  await expect(lis.nth(4)).toHaveText("4:4");
+});
diff --git a/packages/reflow/tests/prop/index.js b/packages/reflow/tests/prop/index.js
index 50f497d..fd8cb20 100644
--- a/packages/reflow/tests/prop/index.js
+++ b/packages/reflow/tests/prop/index.js
@@ -12,6 +12,6 @@ export default () => {
       get indeterminate() {
         return bool.value;
       },
-    })} data-testid="input"></span>
+    })} data-testid="input">
   `;
 };