diff --git a/tests/cypress/integration/directives/x-ignore.spec.js b/tests/cypress/integration/directives/x-ignore.spec.js
index b69ed6cc1..491bb3c8c 100644
--- a/tests/cypress/integration/directives/x-ignore.spec.js
+++ b/tests/cypress/integration/directives/x-ignore.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
+import { haveClasses, haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
 
 test('x-ignore',
     html`
@@ -8,7 +8,9 @@ test('x-ignore',
             </div>
         </div>
     `,
-    ({ get }) => get('span').should(notHaveText('bar'))
+    ({ get }) => {
+        get('span').should(notHaveText('bar'))
+    }
 )
 
 test('x-ignore.self',
@@ -24,3 +26,21 @@ test('x-ignore.self',
         get('h1').should(notHaveClasses(['bar']))
     }
 )
+
+test('can lazyload component',
+    html`
+        <div x-data="{ lazyLoad() {$el.querySelector('#lazy').removeAttribute('x-ignore'); Alpine.nextTick(() => Alpine.initTree($el.querySelector('#lazy')))} }">
+            <button @click="lazyLoad">Load</button>
+            <div x-data="{ foo: 'bar' }" id="lazy" x-ignore :class="foo">
+                <span x-text="foo"></span>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(notHaveText('bar'))
+        get('div#lazy').should(notHaveClasses(['bar']))
+        get('button').click()
+        get('span').should(haveText('bar'))
+        get('div#lazy').should(haveClasses(['bar']))
+    }
+)