diff --git a/tests/frontend/pages/recipesPage.test.js b/tests/frontend/pages/recipesPage.test.js
index d53cd098..21a61497 100644
--- a/tests/frontend/pages/recipesPage.test.js
+++ b/tests/frontend/pages/recipesPage.test.js
@@ -143,6 +143,19 @@ describe('RecipeManager', () => {
 
     renderRecipesPage();
 
+    // Inject controls DOM that would normally come from components/controls.html
+    // (raw template rendering doesn't process Jinja2 {% include %} tags)
+    const customFilterIndicator = document.createElement('div');
+    customFilterIndicator.id = 'customFilterIndicator';
+    customFilterIndicator.className = 'control-group hidden';
+    customFilterIndicator.innerHTML = `
+      <div class="filter-active">
+        <i class="fas fa-filter"></i> <span class="customFilterText" title=""></span>
+        <i class="fas fa-times-circle clear-filter"></i>
+      </div>
+    `;
+    document.body.appendChild(customFilterIndicator);
+
     ({ RecipeManager } = await import('../../../static/js/recipes.js'));
   });
 
@@ -288,7 +301,7 @@ describe('RecipeManager', () => {
     });
 
     const indicator = document.getElementById('customFilterIndicator');
-    const filterText = indicator.querySelector('#customFilterText');
+    const filterText = indicator.querySelector('.customFilterText');
 
     expect(filterText.innerHTML).toContain('Recipes using checkpoint:');
     expect(filterText.innerHTML).toContain('Flux Base');