diff --git a/packages/govuk-frontend/src/govuk/components/warning-text/template.jsdom.test.js b/packages/govuk-frontend/src/govuk/components/warning-text/template.jsdom.test.js
new file mode 100644
index 0000000000..5e7d0bed91
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/warning-text/template.jsdom.test.js
@@ -0,0 +1,76 @@
+const { getExamples, render } = require('@govuk-frontend/lib/components')
+
+describe('Warning text', () => {
+  let examples
+
+  beforeAll(async () => {
+    examples = await getExamples('warning-text')
+  })
+
+  describe('default example', () => {
+    beforeAll(() => {
+      document.body.innerHTML = render('warning-text', examples.default)
+    })
+
+    it('contains the text from the `text` option', () => {
+      const $component = document.querySelector('.govuk-warning-text')
+
+      expect($component).toHaveTextContent(
+        'You can be fined up to £5,000 if you don’t register.'
+      )
+    })
+
+    it('includes the default assistive text', () => {
+      const $assistiveText = document.querySelector('.govuk-visually-hidden')
+
+      expect($assistiveText).toHaveTextContent('Warning')
+    })
+
+    it('hides the icon from screen readers using the `aria-hidden` attribute', () => {
+      const $icon = document.querySelector('.govuk-warning-text__icon')
+
+      expect($icon).toHaveAttribute('aria-hidden', 'true')
+    })
+  })
+
+  it('includes additional classes from the `classes` option', () => {
+    document.body.innerHTML = render('warning-text', examples.classes)
+    const $component = document.querySelector('.govuk-warning-text')
+
+    expect($component).toHaveClass('govuk-warning-text--custom-class')
+  })
+
+  it('includes custom assistive text based on the `iconFallbackText` option', () => {
+    document.body.innerHTML = render(
+      'warning-text',
+      examples['icon fallback text only']
+    )
+    const $assistiveText = document.querySelector('.govuk-visually-hidden')
+
+    expect($assistiveText).toHaveTextContent('Some custom fallback text')
+  })
+
+  it('sets any additional attributes based on the `attributes` option', () => {
+    document.body.innerHTML = render('warning-text', examples.attributes)
+    const $component = document.querySelector('.govuk-warning-text')
+
+    expect($component).toHaveAttribute('data-test', 'attribute')
+    expect($component).toHaveAttribute('id', 'my-warning-text')
+  })
+
+  it('escapes HTML when using the `text` option', () => {
+    document.body.innerHTML = render('warning-text', examples['html as text'])
+    const $component = document.querySelector('.govuk-warning-text')
+
+    expect($component).toHaveTextContent(
+      '<span>Some custom warning text</span>'
+    )
+  })
+
+  it('does not escape HTML when using the `html` option', () => {
+    document.body.innerHTML = render('warning-text', examples.html)
+    const $component = document.querySelector('.govuk-warning-text')
+
+    expect($component).toContainHTML('<span>Some custom warning text</span>')
+  })
+})
diff --git a/packages/govuk-frontend/src/govuk/components/warning-text/template.test.js b/packages/govuk-frontend/src/govuk/components/warning-text/template.test.js
deleted file mode 100644
index 25663d40a9..0000000000
--- a/packages/govuk-frontend/src/govuk/components/warning-text/template.test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-const { render } = require('@govuk-frontend/helpers/nunjucks')
-const { getExamples } = require('@govuk-frontend/lib/components')
-
-describe('Warning text', () => {
-  let examples
-
-  beforeAll(async () => {
-    examples = await getExamples('warning-text')
-  })
-
-  describe('default example', () => {
-    it('renders with text', () => {
-      const $ = render('warning-text', examples.default)
-
-      const $component = $('.govuk-warning-text')
-      expect($component.text()).toContain(
-        'You can be fined up to £5,000 if you don’t register.'
-      )
-    })
-
-    it('renders with default assistive text', () => {
-      const $ = render('warning-text', examples.default)
-
-      const $assistiveText = $('.govuk-visually-hidden')
-      expect($assistiveText.text()).toBe('Warning')
-    })
-
-    it('hides the icon from screen readers using the aria-hidden attribute', () => {
-      const $ = render('warning-text', examples.default)
-
-      const $icon = $('.govuk-warning-text__icon')
-      expect($icon.attr('aria-hidden')).toBe('true')
-    })
-  })
-
-  describe('custom options', () => {
-    it('renders classes', () => {
-      const $ = render('warning-text', examples.classes)
-
-      const $component = $('.govuk-warning-text')
-      expect(
-        $component.hasClass('govuk-warning-text--custom-class')
-      ).toBeTruthy()
-    })
-
-    it('renders custom assistive text', () => {
-      const $ = render('warning-text', examples['icon fallback text only'])
-
-      const $assistiveText = $('.govuk-visually-hidden')
-      expect($assistiveText.html()).toContain('Some custom fallback text')
-    })
-
-    it('renders attributes', () => {
-      const $ = render('warning-text', examples.attributes)
-
-      const $component = $('.govuk-warning-text')
-      expect($component.attr('data-test')).toBe('attribute')
-      expect($component.attr('id')).toBe('my-warning-text')
-    })
-  })
-
-  describe('html', () => {
-    it('renders escaped html when passed to text', () => {
-      const $ = render('warning-text', examples['html as text'])
-
-      const $component = $('.govuk-warning-text')
-      expect($component.html()).toContain(
-        '&lt;span&gt;Some custom warning text&lt;/span&gt;'
-      )
-    })
-
-    it('renders html', () => {
-      const $ = render('warning-text', examples.html)
-
-      const $component = $('.govuk-warning-text')
-      expect($component.html()).toContain(
-        '<span>Some custom warning text</span>'
-      )
-    })
-  })
-})