diff --git a/src/govuk/components/hint/template.jsdom.test.js b/src/govuk/components/hint/template.jsdom.test.js
new file mode 100644
index 0000000000..05de3022c6
--- /dev/null
+++ b/src/govuk/components/hint/template.jsdom.test.js
@@ -0,0 +1,64 @@
+const { getExamples, render } = require('@govuk-frontend/lib/components')
+
+describe('Hint', () => {
+  let examples
+
+  beforeAll(async () => {
+    examples = await getExamples('hint')
+  })
+
+  it('contains the hint text', () => {
+    document.body.innerHTML = render('hint', examples.default)
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).toHaveTextContent(
+      "It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'."
+    )
+  })
+
+  it('includes additional classes from the `classes` option', () => {
+    document.body.innerHTML = render('hint', examples.classes)
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).toHaveClass('app-hint--custom-modifier')
+  })
+
+  it('does not include an `id` attribute if the `id` option is not set', () => {
+    document.body.innerHTML = render('hint', examples.default)
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).not.toHaveAttribute('id')
+  })
+
+  it('sets the `id` attribute based on the `id` option', () => {
+    document.body.innerHTML = render('hint', examples.id)
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).toHaveAttribute('id', 'my-hint')
+  })
+
+  it('escapes HTML when using the `text` option', () => {
+    document.body.innerHTML = render('hint', examples['html as text'])
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).toHaveTextContent(
+      'Unexpected <strong>bold text</strong> in body'
+    )
+  })
+
+  it('does not escape HTML when using the `html` option', () => {
+    document.body.innerHTML = render('hint', examples['with html'])
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).toContainHTML(
+      'It\'s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.\n  For example, \'QQ 12 34 56 C\'.'
+    )
+  })
+
+  it('sets any additional attributes based on the `attributes` option', () => {
+    document.body.innerHTML = render('hint', examples.attributes)
+
+    const $component = document.querySelector('.govuk-hint')
+    expect($component).toHaveAttribute('data-attribute', 'my data value')
+  })
+})
diff --git a/src/govuk/components/hint/template.test.js b/src/govuk/components/hint/template.test.js
deleted file mode 100644
index ab87d828bc..0000000000
--- a/src/govuk/components/hint/template.test.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const { render } = require('@govuk-frontend/helpers/nunjucks')
-const { getExamples } = require('@govuk-frontend/lib/components')
-const { indent } = require('nunjucks/src/filters')
-const { outdent } = require('outdent')
-
-describe('Hint', () => {
-  let examples
-
-  beforeAll(async () => {
-    examples = await getExamples('hint')
-  })
-
-  describe('by default', () => {
-    it('renders with text', () => {
-      const $ = render('hint', examples.default)
-
-      const content = $('.govuk-hint').text()
-      expect(content).toBe(
-        "\n  It's on your National Insurance card, benefit letter, payslip or P60.\nFor example, 'QQ 12 34 56 C'.\n\n"
-      )
-    })
-
-    it('renders with classes', () => {
-      const $ = render('hint', examples.classes)
-
-      const $component = $('.govuk-hint')
-      expect($component.hasClass('app-hint--custom-modifier')).toBeTruthy()
-    })
-
-    it('renders with id', () => {
-      const $ = render('hint', examples.id)
-
-      const $component = $('.govuk-hint')
-      expect($component.attr('id')).toBe('my-hint')
-    })
-
-    it('allows text to be passed whilst escaping HTML entities', () => {
-      const $ = render('hint', examples['html as text'])
-
-      const content = $('.govuk-hint').html().trim()
-      expect(content).toBe(
-        'Unexpected &lt;strong&gt;bold text&lt;/strong&gt; in body'
-      )
-    })
-
-    it('allows HTML to be passed un-escaped', () => {
-      const $ = render('hint', examples['with html'])
-
-      const content = $('.govuk-hint').html().trim()
-      expect(content).toEqual(
-        indent(
-          outdent`
-            It's on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.
-            For example, 'QQ 12 34 56 C'.
-          `,
-          2
-        )
-      )
-    })
-
-    it('renders with attributes', () => {
-      const $ = render('hint', examples.attributes)
-
-      const $component = $('.govuk-hint')
-      expect($component.attr('data-attribute')).toBe('my data value')
-    })
-  })
-})