diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7ac35d2..efbfe5a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,25 +20,27 @@
         <span>extra large 2</span>
       {/snippet}
 
-      <Breakpoints queries={DEFAULT_BREAKPOINT_SIZES} content={{ xl2 }}>
-        {#snippet sm()}
-          <span>small</span>
-        {/snippet}
-        {#snippet md()}
-          <span>medium</span>
-        {/snippet}
-        {#snippet lg()}
-          <span>large</span>
-        {/snippet}
-        {#snippet xl()}
-          <span>extra large</span>
-        {/snippet}
-        <span>unknown</span>
-      </Breakpoints>
+      <span data-test-id="current-match">
+        <Breakpoints queries={DEFAULT_BREAKPOINT_SIZES} content={{ xl2 }}>
+          {#snippet sm()}
+            small
+          {/snippet}
+          {#snippet md()}
+            medium
+          {/snippet}
+          {#snippet lg()}
+            large
+          {/snippet}
+          {#snippet xl()}
+            extra large
+          {/snippet}
+          unknown
+        </Breakpoints>
+      </span>
     </strong></h2>
 
     <Breakpoints queries={DEFAULT_BREAKPOINT_SIZES} let:$matches>
-      <p>Here are all matching queries from binding to the store: {$matches.join(', ')}</p>
+      <p>Here are all matching queries from binding to the store: <span data-test-id="matches-store">{$matches.join(', ')}</span></p>
     </Breakpoints>
 
     <Breakpoints queries={{
diff --git a/tests/index_test.ts b/tests/index_test.ts
index a8fa8df..2a62713 100644
--- a/tests/index_test.ts
+++ b/tests/index_test.ts
@@ -18,3 +18,27 @@ test('index page breakpoints respond to viewport changes', async ({ page }) => {
     ).toBeVisible();
   }
 });
+
+test('store of current matches functions as expected', async ({ page }) => {
+  await page.goto('/');
+
+  await page.setViewportSize({ width: 400, height: 600 });
+
+  await expect(page.locator('[data-test-id="matches-store"]')).toBeVisible();
+
+  expect(
+    await page.locator('[data-test-id="matches-store"]').textContent()
+  ).toEqual('sm');
+
+  await page.setViewportSize({ width: 800, height: 600 });
+
+  expect(
+    await page.locator('[data-test-id="matches-store"]').textContent()
+  ).toEqual('sm, md');
+
+  await page.setViewportSize({ width: 1050, height: 600 });
+
+  expect(
+    await page.locator('[data-test-id="matches-store"]').textContent()
+  ).toEqual('sm, md, lg');
+});