Change tests: swap innerText for textContent

test/constructor.spec.js

@@ -32,7 +32,7 @@ test('auto-detect new components at the top level', async () => {
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
 
 test('auto-detect nested new components at the top level', async () => {
@@ -67,7 +67,7 @@ test('auto-detect nested new components at the top level', async () => {
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
 
 test('auto-detect new components and dont lose state of existing ones', async () => {
@@ -91,7 +91,7 @@ test('auto-detect new components and dont lose state of existing ones', async ()
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 
-    await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('#A span').textContent).toEqual('bar') })
 
     document.querySelector('#B').innerHTML = `
         <div x-data="{foo: 'baz'}">
@@ -109,8 +109,8 @@ test('auto-detect new components and dont lose state of existing ones', async ()
     ])
 
     await wait(() => {
-        expect(document.querySelector('#A span').innerText).toEqual('bar')
-        expect(document.querySelector('#B span').innerText).toEqual('baz')
+        expect(document.querySelector('#A span').textContent).toEqual('bar')
+        expect(document.querySelector('#B span').textContent).toEqual('baz')
     })
 })
 
@@ -135,7 +135,7 @@ test('auto-detect new components that are wrapped in non-new component tags', as
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 
-    await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('#A span').textContent).toEqual('bar') })
 
     document.querySelector('#B').innerHTML = `
         <section>
@@ -155,8 +155,8 @@ test('auto-detect new components that are wrapped in non-new component tags', as
     ])
 
     await wait(() => {
-        expect(document.querySelector('#A span').innerText).toEqual('bar')
-        expect(document.querySelector('#B span').innerText).toEqual('baz')
+        expect(document.querySelector('#A span').textContent).toEqual('bar')
+        expect(document.querySelector('#B span').textContent).toEqual('baz')
     })
 })
 
@@ -179,7 +179,7 @@ test('auto-initialize new elements added to a component', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     document.querySelector('#target').innerHTML = `
         <span x-text="count"></span>
@@ -194,12 +194,12 @@ test('auto-initialize new elements added to a component', async () => {
         ] }
     ])
 
-    await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(0) })
+    await wait(() => { expect(document.querySelector('#target span').textContent).toEqual('0') })
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
-    await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
+    await wait(() => { expect(document.querySelector('#target span').textContent).toEqual('1') })
 })
 
 test('Alpine mutations don\'t trigger (like x-if and x-for) MutationObserver', async () => {
@@ -263,7 +263,7 @@ test('auto-detect x-data property changes at run-time', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     document.querySelector('div').setAttribute('x-data', '{ count: 1 }')
 
@@ -276,7 +276,7 @@ test('auto-detect x-data property changes at run-time', async () => {
         }
     ])
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
 
 test('can use $el when changing x-data property at run-time', async () => {
@@ -295,7 +295,7 @@ test('can use $el when changing x-data property at run-time', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('0')
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     document.querySelector('div').setAttribute('x-data', '{ count: $el.dataset.count }')
 
@@ -308,7 +308,7 @@ test('can use $el when changing x-data property at run-time', async () => {
         }
     ])
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('1') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
 
 test('nested components only get registered once on initialization', async () => {
@@ -355,7 +355,7 @@ test('can clone an existing component to a new element', async () => {
 
     Alpine.clone(document.querySelector('h1').__x, document.querySelector('h2'))
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 })
 
 test('x-attributes are matched exactly', async () => {

test/custom-magic-properties.spec.js

@@ -13,5 +13,5 @@ test('can register custom magic properties', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })

test/data.spec.js

@@ -16,7 +16,7 @@ test('data manipulated on component object is reactive', async () => {
 
     document.querySelector('div').__x.$data.foo = 'baz'
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
 })
 
 test('x-data attribute value is optional', async () => {
@@ -28,7 +28,7 @@ test('x-data attribute value is optional', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 })
 
 test('x-data can use attributes from a reusable function', async () => {
@@ -45,7 +45,7 @@ test('x-data can use attributes from a reusable function', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 })
 
 test('x-data can use $el', async () => {
@@ -57,7 +57,7 @@ test('x-data can use $el', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('test')
+    expect(document.querySelector('span').textContent).toEqual('test')
 })
 
 test('functions in x-data are reactive', async () => {
@@ -69,11 +69,11 @@ test('functions in x-data are reactive', async () => {
     `
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
 })
 
 test('Proxies are not nested and duplicated when manipulating an array', async () => {
@@ -89,33 +89,33 @@ test('Proxies are not nested and duplicated when manipulating an array', async (
 
     // Before this fix: https://github.com/alpinejs/alpine/pull/141
     // This test would create exponentially slower performance and eventually stall out.
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
 
 test('component refresh one time per update whatever the number of mutations in the update', async () => {

test/debounce.spec.js

@@ -20,21 +20,21 @@ test('x-on with debounce modifier', async () => {
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(249)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
 
 test('x-on with debounce modifier and specified wait', async () => {
@@ -51,21 +51,21 @@ test('x-on with debounce modifier and specified wait', async () => {
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(99)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
 
 test('x-model with debounce modifier', async () => {
@@ -78,25 +78,25 @@ test('x-model with debounce modifier', async () => {
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
-    expect(document.querySelector('span').innerText).toEqual('')
+    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
+    expect(document.querySelector('span').textContent).toEqual('')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
-    expect(document.querySelector('span').innerText).toEqual('')
+    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
+    expect(document.querySelector('span').textContent).toEqual('')
 
     await timeout(249)
 
-    expect(document.querySelector('span').innerText).toEqual('')
+    expect(document.querySelector('span').textContent).toEqual('')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 })
 
 test('x-on with debounce modifier (with "ms" suffix)', async () => {
@@ -109,25 +109,25 @@ test('x-on with debounce modifier (with "ms" suffix)', async () => {
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(99)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
 
 test('keydown with key modifier and debounce with 10ms wait', async () => {
@@ -144,14 +144,14 @@ test('keydown with key modifier and debounce with 10ms wait', async () => {
 
     await timeout(10)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
 
 test('keydown with debounce modifier and no specified wait', async () => {
@@ -164,12 +164,12 @@ test('keydown with debounce modifier and no specified wait', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
 
     await timeout(270)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })

test/dispatch.spec.js

@@ -16,9 +16,9 @@ test('$dispatch', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
 })

test/for.spec.js

@@ -19,14 +19,14 @@ test('x-for', async () => {
     Alpine.start()
 
     expect(document.querySelectorAll('span').length).toEqual(1)
-    expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
+    expect(document.querySelectorAll('span')[0].textContent).toEqual('foo')
 
     document.querySelector('button').click()
 
     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(2) })
 
-    expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
-    expect(document.querySelectorAll('span')[1].innerText).toEqual('bar')
+    expect(document.querySelectorAll('span')[0].textContent).toEqual('foo')
+    expect(document.querySelectorAll('span')[1].textContent).toEqual('bar')
 })
 
 test('removes all elements when array is empty and previously had one item', async () => {
@@ -86,14 +86,14 @@ test('elements inside of loop are reactive', async () => {
     Alpine.start()
 
     expect(document.querySelectorAll('span').length).toEqual(1)
-    expect(document.querySelector('h1').innerText).toEqual('first')
-    expect(document.querySelector('h2').innerText).toEqual('bar')
+    expect(document.querySelector('h1').textContent).toEqual('first')
+    expect(document.querySelector('h2').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual('first')
-        expect(document.querySelector('h2').innerText).toEqual('baz')
+        expect(document.querySelector('h1').textContent).toEqual('first')
+        expect(document.querySelector('h2').textContent).toEqual('baz')
     })
 })
 
@@ -112,12 +112,12 @@ test('components inside of loop are reactive', async () => {
     Alpine.start()
 
     expect(document.querySelectorAll('div.child').length).toEqual(1)
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('bob')
+        expect(document.querySelector('span').textContent).toEqual('bob')
     })
 })
 
@@ -138,12 +138,12 @@ test('components inside a plain element of loop are reactive', async () => {
     Alpine.start()
 
     expect(document.querySelectorAll('ul').length).toEqual(1)
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('bob')
+        expect(document.querySelector('span').textContent).toEqual('bob')
     })
 })
 
@@ -209,8 +209,8 @@ test('can use index inside of loop', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('h1').innerText).toEqual(0)
-    expect(document.querySelector('h2').innerText).toEqual(0)
+    expect(document.querySelector('h1').textContent).toEqual('0')
+    expect(document.querySelector('h2').textContent).toEqual('0')
 })
 
 test('can use third iterator param (collection) inside of loop', async () => {
@@ -227,8 +227,8 @@ test('can use third iterator param (collection) inside of loop', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('h1').innerText).toEqual(["foo"])
-    expect(document.querySelector('h2').innerText).toEqual(["foo"])
+    expect(document.querySelector('h1').textContent).toEqual('foo')
+    expect(document.querySelector('h2').textContent).toEqual('foo')
 })
 
 test('can use x-if in conjunction with x-for', async () => {
@@ -278,15 +278,15 @@ test('listeners in loop get fresh iteration data even though they are only regis
 
     document.querySelector('span').click()
 
-    await wait(() => { expect(document.querySelector('h1').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('h1').textContent).toEqual('foo') })
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 
     document.querySelector('span').click()
 
-    await wait(() => { expect(document.querySelector('h1').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('h1').textContent).toEqual('bar') })
 })
 
 test('nested x-for', async () => {
@@ -308,16 +308,16 @@ test('nested x-for', async () => {
     await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(1) })
     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(2) })
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('bob')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('lob')
 
     document.querySelector('button').click()
 
     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(3) })
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob')
-    expect(document.querySelectorAll('h2')[2].innerText).toEqual('law')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('bob')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('lob')
+    expect(document.querySelectorAll('h2')[2].textContent).toEqual('law')
 })
 
 test('x-for updates the right elements when new item are inserted at the beginning of the list', async () => {
@@ -343,9 +343,9 @@ test('x-for updates the right elements when new item are inserted at the beginni
 
     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(3) })
 
-    expect(document.querySelectorAll('span')[0].innerText).toEqual('zero')
-    expect(document.querySelectorAll('span')[1].innerText).toEqual('one')
-    expect(document.querySelectorAll('span')[2].innerText).toEqual('two')
+    expect(document.querySelectorAll('span')[0].textContent).toEqual('zero')
+    expect(document.querySelectorAll('span')[1].textContent).toEqual('one')
+    expect(document.querySelectorAll('span')[2].textContent).toEqual('two')
 
     // Make sure states are preserved
     expect(document.querySelectorAll('span')[0].getAttribute('order')).toEqual(null)
@@ -371,10 +371,10 @@ test('nested x-for access outer loop variable', async () => {
     await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) })
     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(4) })
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob')
-    expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab')
-    expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob')
+    expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab')
+    expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab')
 })
 
 test('nested x-for event listeners', async () => {
@@ -402,20 +402,20 @@ test('nested x-for event listeners', async () => {
     await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) })
     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(4) })
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 0')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-    expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0')
-    expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 0')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+    expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 0')
+    expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
     expect(document._alerts.length).toEqual(0)
 
     document.querySelectorAll('h2')[0].click()
 
     await wait(() => {
-        expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1')
-        expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-        expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0')
-        expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+        expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 1')
+        expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+        expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 0')
+        expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
         expect(document._alerts.length).toEqual(1)
         expect(document._alerts[0]).toEqual('foo: bob = 1')
@@ -424,10 +424,10 @@ test('nested x-for event listeners', async () => {
     document.querySelectorAll('h2')[2].click()
 
     await wait(() => {
-        expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1')
-        expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-        expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1')
-        expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+        expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 1')
+        expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+        expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 1')
+        expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
         expect(document._alerts.length).toEqual(2)
         expect(document._alerts[0]).toEqual('foo: bob = 1')
@@ -437,10 +437,10 @@ test('nested x-for event listeners', async () => {
     document.querySelectorAll('h2')[0].click()
 
     await wait(() => {
-        expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 2')
-        expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-        expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1')
-        expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+        expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 2')
+        expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+        expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 1')
+        expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
         expect(document._alerts.length).toEqual(3)
         expect(document._alerts[0]).toEqual('foo: bob = 1')

test/if.spec.js

@@ -41,7 +41,7 @@ test('elements inside x-if are still reactive', async () => {
     Alpine.start()
 
     expect(document.querySelector('h2')).toBeFalsy()
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('h1').click()
 
@@ -52,7 +52,7 @@ test('elements inside x-if are still reactive', async () => {
     document.querySelector('h2').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
 })
 
@@ -74,7 +74,7 @@ test('x-if works inside a loop', async () => {
     Alpine.start()
 
     expect(document.querySelectorAll('span').length).toEqual(1)
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })
 
 test('event listeners are attached once', async () => {
@@ -89,11 +89,11 @@ test('event listeners are attached once', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual(1)
+        expect(document.querySelector('span').textContent).toEqual('1')
     })
 })

test/lifecycle.spec.js

@@ -26,8 +26,8 @@ test('x-init from data function with callback return for "x-mounted" functionali
     var valueA
     var valueB
     window.setValueA = (el) => { valueA = el.innerHTML }
-    window.setValueB = (el) => { valueB = el.innerText }
-    window.data = function() {
+    window.setValueB = (el) => { valueB = el.textContent }
+    window.data = function () {
         return {
             foo: 'bar',
             init() {
@@ -63,11 +63,11 @@ test('callbacks registered within x-init can affect reactive data changes', asyn
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bob') })
 })
 
 test('callbacks registered within x-init callback can affect reactive data changes', async () => {
@@ -81,11 +81,11 @@ test('callbacks registered within x-init callback can affect reactive data chang
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bob') })
 })
 
 test('x-init is capable of dispatching an event', async () => {
@@ -100,6 +100,6 @@ test('x-init is capable of dispatching an event', async () => {
     Alpine.start()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
 })

test/model.spec.js

@@ -109,7 +109,7 @@ test('x-model trims value if trim modifier is present', async () => {
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' } })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
 
 test('x-model updates value when updated via changed event when lazy modifier is present', async () => {
@@ -248,7 +248,7 @@ test('x-model binds select dropdown', async () => {
     expect(document.querySelectorAll('option')[0].selected).toEqual(false)
     expect(document.querySelectorAll('option')[1].selected).toEqual(true)
     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     fireEvent.change(document.querySelector('select'), { target: { value: 'baz' } });
 
@@ -256,7 +256,7 @@ test('x-model binds select dropdown', async () => {
         expect(document.querySelectorAll('option')[0].selected).toEqual(false)
         expect(document.querySelectorAll('option')[1].selected).toEqual(false)
         expect(document.querySelectorAll('option')[2].selected).toEqual(true)
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
 })
 
@@ -278,7 +278,7 @@ test('x-model binds multiple select dropdown', async () => {
     expect(document.querySelectorAll('option')[0].selected).toEqual(false)
     expect(document.querySelectorAll('option')[1].selected).toEqual(true)
     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
-    expect(document.querySelector('span').innerText).toEqual(['bar'])
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelectorAll('option')[2].selected = true
     fireEvent.change(document.querySelector('select'));
@@ -287,7 +287,7 @@ test('x-model binds multiple select dropdown', async () => {
         expect(document.querySelectorAll('option')[0].selected).toEqual(false)
         expect(document.querySelectorAll('option')[1].selected).toEqual(true)
         expect(document.querySelectorAll('option')[2].selected).toEqual(true)
-        expect(document.querySelector('span').innerText).toEqual(['bar', 'baz'])
+        expect(document.querySelector('span').textContent).toEqual('bar,baz')
     })
 })
 
@@ -302,13 +302,13 @@ test('x-model binds nested keys', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('foo')
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
 })
 
@@ -323,13 +323,13 @@ test('x-model undefined nested model key defaults to empty string', async () =>
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('')
-    expect(document.querySelector('span').innerText).toEqual('')
+    expect(document.querySelector('span').textContent).toEqual('')
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
 })
 
@@ -344,12 +344,12 @@ test('x-model can listen for custom input event dispatches', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
 })
 
@@ -365,13 +365,13 @@ test('x-model bind color input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('#ff0000')
-    expect(document.querySelector('span').innerText).toEqual('#ff0000')
+    expect(document.querySelector('span').textContent).toEqual('#ff0000')
 
     fireEvent.input(document.querySelector('input'), { target: { value: '#00ff00' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('#00ff00')
-        expect(document.querySelector('span').innerText).toEqual('#00ff00')
+        expect(document.querySelector('span').textContent).toEqual('#00ff00')
     })
 
 })
@@ -388,13 +388,13 @@ test('x-model bind button input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('foo')
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
 })
 
@@ -410,13 +410,13 @@ test('x-model bind date input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('2020-07-10')
-    expect(document.querySelector('span').innerText).toEqual('2020-07-10')
+    expect(document.querySelector('span').textContent).toEqual('2020-07-10')
 
     fireEvent.input(document.querySelector('input'), { target: { value: '2021-01-01' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('2021-01-01')
-        expect(document.querySelector('span').innerText).toEqual('2021-01-01')
+        expect(document.querySelector('span').textContent).toEqual('2021-01-01')
     })
 })
 
@@ -432,13 +432,13 @@ test('x-model bind datetime-local input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('2020-01-01T20:00')
-    expect(document.querySelector('span').innerText).toEqual('2020-01-01T20:00')
+    expect(document.querySelector('span').textContent).toEqual('2020-01-01T20:00')
 
     fireEvent.input(document.querySelector('input'), { target: { value: '2021-02-02T20:00' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('2021-02-02T20:00')
-        expect(document.querySelector('span').innerText).toEqual('2021-02-02T20:00')
+        expect(document.querySelector('span').textContent).toEqual('2021-02-02T20:00')
     })
 })
 
@@ -458,13 +458,13 @@ test('x-model bind month input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('2020-04')
-    expect(document.querySelector('span').innerText).toEqual('2020-04')
+    expect(document.querySelector('span').textContent).toEqual('2020-04')
 
     fireEvent.input(document.querySelector('input'), { target: { value: '2021-05' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('2021-05')
-        expect(document.querySelector('span').innerText).toEqual('2021-05')
+        expect(document.querySelector('span').textContent).toEqual('2021-05')
     })
 })
 
@@ -481,13 +481,13 @@ test('x-model bind number input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('11')
-    expect(document.querySelector('span').innerText).toEqual('11')
+    expect(document.querySelector('span').textContent).toEqual('11')
 
     fireEvent.input(document.querySelector('input'), { target: { value: '2021' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('2021')
-        expect(document.querySelector('span').innerText).toEqual('2021')
+        expect(document.querySelector('span').textContent).toEqual('2021')
     })
 })
 
@@ -503,13 +503,13 @@ test('x-model bind password input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('SecretKey')
-    expect(document.querySelector('span').innerText).toEqual('SecretKey')
+    expect(document.querySelector('span').textContent).toEqual('SecretKey')
 
     fireEvent.input(document.querySelector('input'), { target: { value: 'NewSecretKey' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('NewSecretKey')
-        expect(document.querySelector('span').innerText).toEqual('NewSecretKey')
+        expect(document.querySelector('span').textContent).toEqual('NewSecretKey')
     })
 })
 
@@ -525,13 +525,13 @@ test('x-model bind range input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('10')
-    expect(document.querySelector('span').innerText).toEqual('10')
+    expect(document.querySelector('span').textContent).toEqual('10')
 
     fireEvent.input(document.querySelector('input'), { target: { value: '20' } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('20')
-        expect(document.querySelector('span').innerText).toEqual('20')
+        expect(document.querySelector('span').textContent).toEqual('20')
     })
 })
 
@@ -547,14 +547,14 @@ test('x-model bind search input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('')
-    expect(document.querySelector('span').innerText).toEqual('')
+    expect(document.querySelector('span').textContent).toEqual('')
 
     const newValue = 'Frontend Frameworks';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 
@@ -570,14 +570,14 @@ test('x-model bind tel input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('+12345678901')
-    expect(document.querySelector('span').innerText).toEqual('+12345678901')
+    expect(document.querySelector('span').textContent).toEqual('+12345678901')
 
     const newValue = '+1239874560';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 
@@ -593,14 +593,14 @@ test('x-model bind tel input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('+12345678901')
-    expect(document.querySelector('span').innerText).toEqual('+12345678901')
+    expect(document.querySelector('span').textContent).toEqual('+12345678901')
 
     const newValue = '+1239874560';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 
@@ -616,14 +616,14 @@ test('x-model bind time input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('22:00')
-    expect(document.querySelector('span').innerText).toEqual('22:00')
+    expect(document.querySelector('span').textContent).toEqual('22:00')
 
     const newValue = '23:00';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 
@@ -639,14 +639,14 @@ test('x-model bind time input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('22:00')
-    expect(document.querySelector('span').innerText).toEqual('22:00')
+    expect(document.querySelector('span').textContent).toEqual('22:00')
 
     const newValue = '23:00';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 
@@ -662,14 +662,14 @@ test('x-model bind week input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('2020-W20')
-    expect(document.querySelector('span').innerText).toEqual('2020-W20')
+    expect(document.querySelector('span').textContent).toEqual('2020-W20')
 
     const newValue = '2020-W30';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 
@@ -685,14 +685,14 @@ test('x-model bind url input', async () => {
     Alpine.start()
 
     expect(document.querySelector('input').value).toEqual('https://example.com')
-    expect(document.querySelector('span').innerText).toEqual('https://example.com')
+    expect(document.querySelector('span').textContent).toEqual('https://example.com')
 
     const newValue = 'https://alpine.io';
     fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
 })
 

test/mutations.spec.js

@@ -48,23 +48,23 @@ test('mutationObserver doesn\'t reset data when reparenting nested components',
 
     Alpine.start()
 
-    expect(document.querySelector('button').innerText).toEqual(1)
+    expect(document.querySelector('button').textContent).toEqual('1')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('button').innerText).toEqual(2) })
+    await wait(() => { expect(document.querySelector('button').textContent).toEqual('2') })
 
     // Move the component and run the observer
     document.getElementById('b').appendChild(document.querySelector('button'))
     runObservers.forEach(cb => {
         cb([
             {
-                target:  document.getElementById('b'),
+                target: document.getElementById('b'),
                 type: 'childList',
                 addedNodes: [ document.querySelector('button') ],
             }
         ])
     })
 
-    await wait(() => { expect(document.querySelector('button').innerText).toEqual(2) })
+    await wait(() => { expect(document.querySelector('button').textContent).toEqual('2') })
 })

test/nesting.spec.js

@@ -19,13 +19,13 @@ test('can nest components', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await timeout(20)
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
 
 test('can access parent properties after nested components', async () => {
@@ -41,5 +41,5 @@ test('can access parent properties after nested components', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 })

test/next-tick.spec.js

@@ -10,17 +10,17 @@ test('$nextTick', async () => {
         <div x-data="{foo: 'bar'}">
             <span x-text="foo" x-ref="span"></span>
 
-            <button x-on:click="foo = 'baz'; $nextTick(() => {$refs.span.innerText = 'bob'})"></button>
+            <button x-on:click="foo = 'baz'; $nextTick(() => {$refs.span.textContent = 'bob'})"></button>
         </div>
     `
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
-    await wait(() => expect(document.querySelector('span').innerText).toEqual('bob'))
+    await wait(() => expect(document.querySelector('span').textContent).toEqual('bob'))
 })
 
 test('$nextTick waits for x-for to finish rendering', async () => {
@@ -38,11 +38,11 @@ test('$nextTick waits for x-for to finish rendering', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('p').innerText).toEqual(2)
+    expect(document.querySelector('p').textContent).toEqual('2')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('p').innerText).toEqual(3) })
+    await wait(() => { expect(document.querySelector('p').textContent).toEqual('3') })
 })
 
 test('$nextTick works with transition', async () => {
@@ -63,12 +63,12 @@ test('$nextTick works with transition', async () => {
     Alpine.start()
 
     await wait(() => {
-        expect(document.querySelector('h2').innerText).toEqual('none')
+        expect(document.querySelector('h2').textContent).toEqual('none')
     })
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('h2').innerText).toEqual('')
+        expect(document.querySelector('h2').textContent).toEqual('')
     })
 })

test/on.spec.js

@@ -99,18 +99,18 @@ test('.self modifier', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
 
     document.querySelector('#selfTarget').click()
 
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
 })
 
@@ -249,23 +249,23 @@ test('keydown modifiers', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(2) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('2') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: ' ' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(4) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('4') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Spacebar' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(6) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('6') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(7) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('7') })
 })
 
 test('keydown combo modifiers', async () => {
@@ -279,15 +279,15 @@ test('keydown combo modifiers', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('0') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter', metaKey: true })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
 
 test('keydown with specified key and stop modifier only stops for specified key', async () => {
@@ -303,16 +303,16 @@ test('keydown with specified key and stop modifier only stops for specified key'
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
 
     await timeout(25)
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
 
 test('click away', async () => {
@@ -320,10 +320,10 @@ test('click away', async () => {
     // make our own implementation using a specific class added to the class. Ugh.
     Object.defineProperties(window.HTMLElement.prototype, {
         offsetHeight: {
-          get: function() { return this.classList.contains('hidden') ? 0 : 1 }
+            get: function () { return this.classList.contains('hidden') ? 0 : 1 }
         },
         offsetWidth: {
-          get: function() { return this.classList.contains('hidden') ? 0 : 1 }
+            get: function () { return this.classList.contains('hidden') ? 0 : 1 }
         }
     });
 
@@ -467,13 +467,13 @@ test('allow method reference to be passed to listeners', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await new Promise(resolve => setTimeout(resolve, 1))
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })
 
 test('event instance is passed to method reference', async () => {
@@ -486,13 +486,13 @@ test('event instance is passed to method reference', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
     await new Promise(resolve => setTimeout(resolve, 1))
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })
 
 test('autocomplete event does not trigger keydown with modifier callback', async () => {
@@ -506,21 +506,21 @@ test('autocomplete event does not trigger keydown with modifier callback', async
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     const autocompleteEvent = new Event('keydown')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('0') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: '?' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 
     fireEvent(document.querySelector('input'), autocompleteEvent)
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
 
 test('.camel modifier correctly binds event listener', async () => {
@@ -533,12 +533,12 @@ test('.camel modifier correctly binds event listener', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('p').innerText).toEqual('bar')
+    expect(document.querySelector('p').textContent).toEqual('bar')
 
     document.querySelector('button').click();
 
     await wait(() => {
-        expect(document.querySelector('p').innerText).toEqual('bob');
+        expect(document.querySelector('p').textContent).toEqual('bob');
     });
 })
 
@@ -552,11 +552,11 @@ test('.camel modifier correctly binds event listener with namespace', async () =
 
     Alpine.start()
 
-    expect(document.querySelector('p').innerText).toEqual('bar')
+    expect(document.querySelector('p').textContent).toEqual('bar')
 
     document.querySelector('button').click();
 
     await wait(() => {
-        expect(document.querySelector('p').innerText).toEqual('bob');
+        expect(document.querySelector('p').textContent).toEqual('bob');
     });
 })

test/readonly.spec.js

@@ -18,7 +18,7 @@ test('read-only properties do not break the proxy', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     const input = document.querySelector('input')
     Object.defineProperty(input, 'files', {
@@ -27,5 +27,5 @@ test('read-only properties do not break the proxy', async () => {
 
     input.dispatchEvent(new Event('change'));
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })

test/ref.spec.js

@@ -10,22 +10,22 @@ test('can reference elements from event listeners', async () => {
         <div x-data="{}">
             <span x-ref="bob"></span>
 
-            <button x-on:click="$refs['bob'].innerText = 'lob'"></button>
+            <button x-on:click="$refs['bob'].textContent = 'lob'"></button>
         </div>
     `
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(undefined)
+    expect(document.querySelector('span').textContent).toEqual('')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('lob') })
 })
 
 test('can reference elements from data object methods', async () => {
     document.body.innerHTML = `
-        <div x-data="{ foo() { this.$refs.bob.innerText = 'lob' } }">
+        <div x-data="{ foo() { this.$refs.bob.textContent = 'lob' } }">
             <span x-ref="bob"></span>
 
             <button x-on:click="foo()"></button>
@@ -34,9 +34,9 @@ test('can reference elements from data object methods', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('span').innerText).toEqual(undefined)
+    expect(document.querySelector('span').textContent).toEqual('')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('lob') })
 })

test/spread.spec.js

@@ -62,9 +62,9 @@ test('x-spread supports x-for', async () => {
 
     Alpine.start()
 
-    expect(document.querySelectorAll('li')[0].innerText).toEqual('one')
-    expect(document.querySelectorAll('li')[1].innerText).toEqual('two')
-    expect(document.querySelectorAll('li')[2].innerText).toEqual('three')
+    expect(document.querySelectorAll('li')[0].textContent).toEqual('one')
+    expect(document.querySelectorAll('li')[1].textContent).toEqual('two')
+    expect(document.querySelectorAll('li')[2].textContent).toEqual('three')
 })
 
 test('x-spread syntax supports x-transition', async () => {

test/strict-mode.spec.js

@@ -26,5 +26,5 @@ test('Proxy does not error in strict mode when reactivity is suspended', async (
 
     Alpine.start()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1200) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1200') })
 })

test/text.spec.js

@@ -2,7 +2,7 @@ import Alpine from 'alpinejs'
 import { wait } from '@testing-library/dom'
 
 global.MutationObserver = class {
-    observe() {}
+    observe() { }
 }
 
 test('x-text on init', async () => {

test/watch.spec.js

@@ -17,14 +17,14 @@ test('$watch', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('h1').innerText).toEqual('bar')
-    expect(document.querySelector('h2').innerText).toEqual('lob')
+    expect(document.querySelector('h1').textContent).toEqual('bar')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual('baz')
-        expect(document.querySelector('h2').innerText).toEqual('baz')
+        expect(document.querySelector('h1').textContent).toEqual('baz')
+        expect(document.querySelector('h2').textContent).toEqual('baz')
     })
 })
 
@@ -42,14 +42,14 @@ test('$watch nested properties', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('h1').innerText).toEqual('baz')
-    expect(document.querySelector('h2').innerText).toEqual('lob')
+    expect(document.querySelector('h1').textContent).toEqual('baz')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
 
     document.querySelector('button').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual('law')
-        expect(document.querySelector('h2').innerText).toEqual('law')
+        expect(document.querySelector('h1').textContent).toEqual('law')
+        expect(document.querySelector('h2').textContent).toEqual('law')
     })
 })
 
@@ -71,56 +71,56 @@ test('$watch arrays', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('h1').innerText).toEqual(['one'])
-    expect(document.querySelector('h2').innerText).toEqual('lob')
+    expect(document.querySelector('h1').textContent).toEqual('one')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
 
     document.querySelector('#push').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual(['one','two'])
-        expect(document.querySelector('h2').innerText).toEqual(['one','two'])
+        expect(document.querySelector('h1').textContent).toEqual('one,two')
+        expect(document.querySelector('h2').textContent).toEqual('one,two')
     })
 
     document.querySelector('#pop').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual(['one'])
-        expect(document.querySelector('h2').innerText).toEqual(['one'])
+        expect(document.querySelector('h1').textContent).toEqual('one')
+        expect(document.querySelector('h2').textContent).toEqual('one')
     })
 
     document.querySelector('#unshift').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual(['zero','one'])
-        expect(document.querySelector('h2').innerText).toEqual(['zero','one'])
+        expect(document.querySelector('h1').textContent).toEqual('zero,one')
+        expect(document.querySelector('h2').textContent).toEqual('zero,one')
     })
 
     document.querySelector('#shift').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual(['one'])
-        expect(document.querySelector('h2').innerText).toEqual(['one'])
+        expect(document.querySelector('h1').textContent).toEqual('one')
+        expect(document.querySelector('h2').textContent).toEqual('one')
     })
 
     document.querySelector('#assign').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual([2,1,3])
-        expect(document.querySelector('h2').innerText).toEqual([2,1,3])
+        expect(document.querySelector('h1').textContent).toEqual('2,1,3')
+        expect(document.querySelector('h2').textContent).toEqual('2,1,3')
     })
 
     document.querySelector('#sort').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual([1,2,3])
-        expect(document.querySelector('h2').innerText).toEqual([1,2,3])
+        expect(document.querySelector('h1').textContent).toEqual('1,2,3')
+        expect(document.querySelector('h2').textContent).toEqual('1,2,3')
     })
 
     document.querySelector('#reverse').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual([3,2,1])
-        expect(document.querySelector('h2').innerText).toEqual([3,2,1])
+        expect(document.querySelector('h1').textContent).toEqual('3,2,1')
+        expect(document.querySelector('h2').textContent).toEqual('3,2,1')
     })
 })
 
@@ -136,13 +136,13 @@ test('$watch nested arrays', async () => {
 
     Alpine.start()
 
-    expect(document.querySelector('h1').innerText).toEqual(['one'])
-    expect(document.querySelector('h2').innerText).toEqual('lob')
+    expect(document.querySelector('h1').textContent).toEqual('one')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
 
     document.querySelector('#push').click()
 
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual(['one','two'])
-        expect(document.querySelector('h2').innerText).toEqual(['one','two'])
+        expect(document.querySelector('h1').textContent).toEqual('one,two')
+        expect(document.querySelector('h2').textContent).toEqual('one,two')
     })
 })