diff --git a/cypress/helpers/delay.js b/cypress/helpers/delay.js
new file mode 100644
index 0000000..1ded130
--- /dev/null
+++ b/cypress/helpers/delay.js
@@ -0,0 +1,3 @@
+export function delay(ms) {
+  return new Promise((resolve) => setTimeout(() => resolve(), ms))
+}
diff --git a/cypress/helpers/renderReactApp.js b/cypress/helpers/renderReactApp.js
new file mode 100644
index 0000000..ded1ed1
--- /dev/null
+++ b/cypress/helpers/renderReactApp.js
@@ -0,0 +1,15 @@
+import { createRoot } from 'react-dom/client'
+
+let root
+let rootElement
+
+export function renderReactApp(app) {
+  if (root) {
+    root.unmount()
+    document.body.removeChild(rootElement)
+  }
+  rootElement = document.createElement('div')
+  document.body.appendChild(rootElement)
+  root = createRoot(rootElement)
+  root.render(app)
+}
diff --git a/cypress/integration/SwalRoot.spec.js b/cypress/integration/SwalRoot.spec.js
new file mode 100644
index 0000000..55a7251
--- /dev/null
+++ b/cypress/integration/SwalRoot.spec.js
@@ -0,0 +1,58 @@
+/// <reference types="cypress" />
+
+import React from 'react'
+import Swal from 'sweetalert2'
+import { delay } from '../helpers/delay'
+import { renderReactApp } from '../helpers/renderReactApp'
+import withReactContent, { SwalRoot } from '../../src/index'
+
+context('SwalRoot', () => {
+  it('works', async () => {
+    const MySwal = withReactContent(Swal)
+
+    // 'bad' is the default used when no context value has actually been provided
+    const CountContext = React.createContext('bad')
+
+    const MyApp = () => {
+      const [count, setCount] = React.useState(1)
+      const incrementCount = React.useCallback(() => setCount(count => count + 1), [])
+      return (
+        <CountContext.Provider value={count}>
+          <div style={{textAlign: 'center'}}>
+            <span>{count}</span>{' '}
+            <button id="increment-count" onClick={incrementCount}>Increment</button>
+          </div>
+          <SwalRoot />
+          <MyComponent />
+        </CountContext.Provider>
+      )
+    }
+
+    const MyComponent = () => {
+      const showPopup = React.useCallback(() => {
+        MySwal.fire({
+          html: <MySwalContent />,
+        })
+      }, [])
+      return (
+        <div style={{textAlign: 'center'}}>
+          <button id="show-popup" onClick={showPopup}>Show Popup</button>
+        </div>
+      )
+    }
+
+    const MySwalContent = () => {
+      const count = React.useContext(CountContext)
+      return <span>{count}</span>
+    }
+
+    renderReactApp(<MyApp />)
+    await delay(100)
+    document.querySelector('button#show-popup').click()
+    await delay(100)
+    expect(MySwal.getHtmlContainer().innerHTML).to.eq('<span>1</span>')
+    document.querySelector('button#increment-count').click()
+    await delay(100)
+    expect(MySwal.getHtmlContainer().innerHTML).to.eq('<span>2</span>')
+  })
+})