diff --git a/packages/govuk-frontend/src/govuk/components/input/__snapshots__/template.test.js.snap b/packages/govuk-frontend/src/govuk/components/input/__snapshots__/template.test.js.snap
deleted file mode 100644
index aca371db65..0000000000
--- a/packages/govuk-frontend/src/govuk/components/input/__snapshots__/template.test.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Input when it includes a hint renders the hint 1`] = `
-<div id="input-with-hint-text-hint"
-     class="govuk-hint"
->
-  It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
-</div>
-`;
-
-exports[`Input when it includes an error message renders the error message 1`] = `
-<p id="input-with-error-message-error"
-   class="govuk-error-message"
->
-  Error message goes here
-</p>
-`;
-
-exports[`Input with dependant components renders with label 1`] = `
-<label class="govuk-label"
-       for="input-example"
->
-  National Insurance number
-</label>
-`;
diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
index 09c74b6fe2..b54527b170 100644
--- a/packages/govuk-frontend/src/govuk/components/input/input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -180,8 +180,6 @@ examples:
     options:
       label:
         text: National Insurance number
-      hint:
-        text: It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
       id: input-with-error-message
       name: test-name-3
       errorMessage:
@@ -304,6 +302,12 @@ examples:
       name: autocapitalize
       type: text
       autocapitalize: none
+  - name: disabled
+    options:
+      label:
+        text: Disabled input
+      id: disabled-input
+      disabled: true
 
   - name: with prefix
     options:
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js b/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js
new file mode 100644
index 0000000000..f87f1f81ef
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js
@@ -0,0 +1,496 @@
+const { getExamples, render } = require('@govuk-frontend/lib/components')
+
+describe('Input', () => {
+  let examples
+
+  beforeAll(async () => {
+    examples = await getExamples('input')
+  })
+
+  describe('default example', () => {
+    let $component
+    let $label
+
+    beforeAll(() => {
+      document.body.innerHTML = render('input', examples.default)
+      $component = document.querySelector('.govuk-input')
+      $label = document.querySelector('.govuk-label')
+    })
+
+    it('sets the `id` attribute based on the `id` option', () => {
+      expect($component).toHaveAttribute('id', 'input-example')
+    })
+
+    it('sets the `name` attribute based on the `name` option', () => {
+      expect($component).toHaveAttribute('name', 'test-name')
+    })
+
+    it('sets the `type` attribute to a default value of "text"', () => {
+      expect($component).toHaveAttribute('type', 'text')
+    })
+
+    it('includes a form group wrapper', () => {
+      const $formGroup = document.querySelector('.govuk-form-group')
+
+      expect($formGroup).toBeInTheDocument()
+      expect($formGroup).toContainElement($component)
+    })
+
+    it('includes a label', () => {
+      expect($label).toBeInTheDocument()
+    })
+
+    it('the input is named by the label', () => {
+      expect($component).toHaveAccessibleName($label.textContent.trim())
+    })
+
+    it('does not include the input wrapper', () => {
+      const $wrapper = document.querySelector(
+        '.govuk-form-group > .govuk-input__wrapper'
+      )
+
+      expect($wrapper).toBeNull()
+    })
+
+    it.each([
+      'autocapitalize',
+      'autocomplete',
+      'disabled',
+      'inputmode',
+      'pattern',
+      'spellcheck'
+    ])('does not set the `%s` attribute', (attribute) => {
+      expect($component).not.toHaveAttribute(attribute)
+    })
+  })
+
+  describe('custom options', () => {
+    it('includes additional classes from the `classes` option', () => {
+      document.body.innerHTML = render('input', examples.classes)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveClass('app-input--custom-modifier')
+    })
+
+    it('sets the `type` attribute based on the `type` option', () => {
+      document.body.innerHTML = render('input', examples['custom type'])
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('type', 'number')
+    })
+
+    it('sets the `pattern` attribute based on the `pattern` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with pattern attribute']
+      )
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('pattern', '[0-9]*')
+    })
+
+    it('sets the `value` attribute based on the `value` option', () => {
+      document.body.innerHTML = render('input', examples.value)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveValue('QQ 12 34 56 C')
+    })
+
+    it('sets the `value` attribute based on a `value` of "0"', () => {
+      document.body.innerHTML = render('input', examples['zero value'])
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveValue('0')
+    })
+
+    it('sets the `aria-describedby` attribute based on the `describedBy` option', () => {
+      document.body.innerHTML = render('input', examples['with describedBy'])
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute(
+        'aria-describedby',
+        'test-target-element'
+      )
+    })
+
+    it('sets any additional attributes based on the `attributes` option', () => {
+      document.body.innerHTML = render('input', examples.attributes)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('data-attribute', 'my data value')
+    })
+
+    it('includes additional classes from the `formGroup.classes` option on the form group', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with optional form-group classes']
+      )
+
+      const $formGroup = document.querySelector('.govuk-form-group')
+      expect($formGroup).toHaveClass('extra-class')
+    })
+  })
+
+  describe('when a hint is passed', () => {
+    let $component
+    let $hint
+
+    beforeAll(() => {
+      document.body.innerHTML = render('input', examples['with hint text'])
+
+      $component = document.querySelector('.govuk-input')
+      $hint = document.querySelector('.govuk-hint')
+    })
+
+    it('includes the hint', () => {
+      expect($hint).toBeInTheDocument()
+    })
+
+    it('associates the input as described by the hint', () => {
+      expect($component).toHaveAccessibleDescription($hint.textContent.trim())
+    })
+
+    it('associates the input as described by both the hint and the `describedBy` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['hint with describedBy']
+      )
+
+      const $additionalDescription = document.createElement('p')
+      $additionalDescription.id = 'test-target-element'
+      $additionalDescription.textContent = 'Additional description'
+      document.body.appendChild($additionalDescription)
+
+      const $input = document.querySelector('.govuk-input')
+      const $hint = document.querySelector('.govuk-hint')
+
+      expect($input).toHaveAccessibleDescription(
+        [$additionalDescription, $hint]
+          .map((el) => el.textContent.trim())
+          .join(' ')
+      )
+    })
+  })
+
+  describe('when an error message is passed', () => {
+    let $component
+    let $errorMessage
+
+    beforeAll(() => {
+      document.body.innerHTML = render('input', examples['with error message'])
+
+      $component = document.querySelector('.govuk-input')
+      $errorMessage = document.querySelector('.govuk-error-message')
+    })
+
+    it('includes the error message', () => {
+      expect($errorMessage).toBeInTheDocument()
+    })
+
+    it('associates the input as described by the error message', () => {
+      expect($component).toHaveAccessibleDescription(
+        $errorMessage.textContent.trim()
+      )
+    })
+
+    it('associates the input as described by the error message and the `describedBy` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['error with describedBy']
+      )
+
+      const $additionalDescription = document.createElement('p')
+      $additionalDescription.id = 'test-target-element'
+      $additionalDescription.textContent = 'Additional description'
+      document.body.appendChild($additionalDescription)
+
+      const $input = document.querySelector('.govuk-input')
+      const $errorMessage = document.querySelector('.govuk-error-message')
+
+      expect($input).toHaveAccessibleDescription(
+        [$additionalDescription, $errorMessage]
+          .map((el) => el.textContent.trim())
+          .join(' ')
+      )
+    })
+
+    it('includes the error modifier class on the input', () => {
+      expect($component).toHaveClass('govuk-input--error')
+    })
+
+    it('includes the error modifier class on the form group wrapper', () => {
+      const $formGroup = document.querySelector('.govuk-form-group')
+
+      expect($formGroup).toHaveClass('govuk-form-group--error')
+    })
+  })
+
+  describe('when both a hint and an error message are passed', () => {
+    it('associates the input as described by both the hint and the error message', () => {
+      document.body.innerHTML = render('input', examples['with error and hint'])
+
+      const $component = document.querySelector('.govuk-input')
+      const $errorMessage = document.querySelector('.govuk-error-message')
+      const $hint = document.querySelector('.govuk-hint')
+
+      expect($component).toHaveAccessibleDescription(
+        [$hint, $errorMessage].map((el) => el.textContent.trim()).join(' ')
+      )
+    })
+
+    it('associates the input as described by the hint, error message and the `describedBy` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with error, hint and describedBy']
+      )
+
+      const $additionalDescription = document.createElement('p')
+      $additionalDescription.id = 'test-target-element'
+      $additionalDescription.textContent = 'Additional description'
+      document.body.appendChild($additionalDescription)
+
+      const $component = document.querySelector('.govuk-input')
+      const $errorMessage = document.querySelector('.govuk-error-message')
+      const $hint = document.querySelector('.govuk-hint')
+
+      expect($component).toHaveAccessibleDescription(
+        [$additionalDescription, $hint, $errorMessage]
+          .map((el) => el.textContent.trim())
+          .join(' ')
+      )
+    })
+  })
+
+  describe('when the `spellcheck` option is set', () => {
+    it('sets the `spellcheck` attribute to "true" if the option is true', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with spellcheck enabled']
+      )
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('spellcheck', 'true')
+    })
+
+    it('sets the `spellcheck` attribute to "false" if the option is false', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with spellcheck disabled']
+      )
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('spellcheck', 'false')
+    })
+  })
+
+  describe('when the `autocapitalize` option is set', () => {
+    it('sets the `autocapitalize` attribute based on the option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with autocapitalize turned off']
+      )
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('autocapitalize', 'none')
+    })
+  })
+
+  describe('when the `autocomplete` option is set', () => {
+    it('sets the `autocomplete` attribute based on the option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with autocomplete attribute']
+      )
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('autocomplete', 'postal-code')
+    })
+  })
+
+  describe('when the `inputmode` option is set', () => {
+    it('sets the `inputmode` attribute based on the option', () => {
+      document.body.innerHTML = render('input', examples.inputmode)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('inputmode', 'decimal')
+    })
+  })
+
+  describe('when the `disabled` option is set', () => {
+    it('disables the input', () => {
+      document.body.innerHTML = render('input', examples.disabled)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toBeDisabled()
+    })
+  })
+
+  describe('when it includes a prefix', () => {
+    let $wrapper
+    let $prefix
+
+    beforeAll(() => {
+      document.body.innerHTML = render('input', examples['with prefix'])
+
+      $wrapper = document.querySelector('.govuk-input__wrapper')
+      $prefix = document.querySelector('.govuk-input__prefix')
+    })
+
+    it('renders the input wrapper', () => {
+      expect($wrapper).toBeInTheDocument()
+    })
+
+    it('renders the prefix inside the wrapper', () => {
+      expect($wrapper).toContainElement($prefix)
+    })
+
+    it('renders the text in the prefix', () => {
+      expect($prefix).toHaveTextContent('£')
+    })
+
+    it('hides the prefix from screen readers using `aria-hidden`', () => {
+      expect($prefix).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('escapes HTML entities when using the `text` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix with html as text']
+      )
+      const $prefix = document.querySelector('.govuk-input__prefix')
+
+      expect($prefix).toHaveTextContent('<span>£</span>')
+    })
+
+    it('allows HTML to be passed when using the `html` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix with html']
+      )
+      const $prefix = document.querySelector('.govuk-input__prefix')
+
+      expect($prefix).toContainHTML('<span>£</span>')
+    })
+
+    it('includes additional classes from the `prefix.classes` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix with classes']
+      )
+      const $prefix = document.querySelector('.govuk-input__prefix')
+
+      expect($prefix).toHaveClass('app-input__prefix--custom-modifier')
+    })
+
+    it('sets additional attributes from the `prefix.attributes` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix with attributes']
+      )
+      const $prefix = document.querySelector('.govuk-input__prefix')
+
+      expect($prefix).toHaveAttribute('data-attribute', 'value')
+    })
+  })
+
+  describe('when it includes a suffix', () => {
+    let $wrapper
+    let $suffix
+
+    beforeAll(() => {
+      document.body.innerHTML = render('input', examples['with suffix'])
+
+      $wrapper = document.querySelector('.govuk-input__wrapper')
+      $suffix = document.querySelector('.govuk-input__suffix')
+    })
+
+    it('renders the input wrapper', () => {
+      expect($wrapper).toBeInTheDocument()
+    })
+
+    it('renders the suffix inside the wrapper', () => {
+      expect($wrapper).toContainElement($suffix)
+    })
+
+    it('renders the text in the suffix', () => {
+      expect($suffix).toHaveTextContent('kg')
+    })
+
+    it('hides the suffix from screen readers using `aria-hidden`', () => {
+      expect($suffix).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('escapes HTML entities when using the `text` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with suffix with html as text']
+      )
+      const $suffix = document.querySelector('.govuk-input__suffix')
+
+      expect($suffix).toHaveTextContent('<span>kg</span>')
+    })
+
+    it('allows HTML to be passed when using the `html` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with suffix with html']
+      )
+      const $suffix = document.querySelector('.govuk-input__suffix')
+
+      expect($suffix).toContainHTML('<span>kg</span>')
+    })
+
+    it('includes additional classes from the `prefix.classes` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix with classes']
+      )
+      const $prefix = document.querySelector('.govuk-input__prefix')
+
+      expect($prefix).toHaveClass('app-input__prefix--custom-modifier')
+    })
+
+    it('sets additional attributes from the `prefix.attributes` option', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix with attributes']
+      )
+      const $prefix = document.querySelector('.govuk-input__prefix')
+
+      expect($prefix).toHaveAttribute('data-attribute', 'value')
+    })
+  })
+
+  describe('when it includes both a prefix and a suffix', () => {
+    it('renders the prefix before the suffix', () => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with prefix and suffix']
+      )
+
+      expect(
+        document.querySelector('.govuk-input__prefix ~ .govuk-input__suffix')
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('when it includes the input wrapper', () => {
+    let $wrapper
+
+    beforeAll(() => {
+      document.body.innerHTML = render(
+        'input',
+        examples['with customised input wrapper']
+      )
+      $wrapper = document.querySelector('.govuk-input__wrapper')
+    })
+
+    it('includes additional classes from the `inputWrapper.classes` option', () => {
+      expect($wrapper).toHaveClass('app-input-wrapper--custom-modifier')
+    })
+
+    it('renders the input wrapper with custom attributes', () => {
+      expect($wrapper).toHaveAttribute('data-attribute', 'value')
+    })
+  })
+})
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.test.js b/packages/govuk-frontend/src/govuk/components/input/template.test.js
deleted file mode 100644
index d8795ba14a..0000000000
--- a/packages/govuk-frontend/src/govuk/components/input/template.test.js
+++ /dev/null
@@ -1,483 +0,0 @@
-const { render } = require('@govuk-frontend/helpers/nunjucks')
-const { htmlWithClassName } = require('@govuk-frontend/helpers/tests')
-const { getExamples } = require('@govuk-frontend/lib/components')
-
-const WORD_BOUNDARY = '\\b'
-const WHITESPACE = '\\s'
-
-describe('Input', () => {
-  let examples
-
-  beforeAll(async () => {
-    examples = await getExamples('input')
-  })
-
-  describe('default example', () => {
-    it('renders with id', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('id')).toBe('input-example')
-    })
-
-    it('renders with name', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('name')).toBe('test-name')
-    })
-
-    it('renders with type="text" by default', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('type')).toBe('text')
-    })
-
-    it('renders with a form group wrapper', () => {
-      const $ = render('input', examples.default)
-
-      const $formGroup = $('.govuk-form-group')
-      expect($formGroup.length).toBeTruthy()
-    })
-  })
-
-  describe('custom options', () => {
-    it('renders with classes', () => {
-      const $ = render('input', examples.classes)
-
-      const $component = $('.govuk-input')
-      expect($component.hasClass('app-input--custom-modifier')).toBeTruthy()
-    })
-
-    it('allows you to override the type', () => {
-      const $ = render('input', examples['custom type'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('type')).toBe('number')
-    })
-
-    it('renders with pattern attribute', () => {
-      const $ = render('input', examples['with pattern attribute'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('pattern')).toBe('[0-9]*')
-    })
-
-    it('renders with value', () => {
-      const $ = render('input', examples.value)
-
-      const $component = $('.govuk-input')
-      expect($component.val()).toBe('QQ 12 34 56 C')
-    })
-
-    it('renders with zero value', () => {
-      const $ = render('input', examples['zero value'])
-
-      const $component = $('.govuk-input')
-      expect($component.val()).toBe('0')
-    })
-
-    it('renders with aria-describedby', () => {
-      const $ = render('input', examples['with describedBy'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('aria-describedby')).toMatch('test-target-element')
-    })
-
-    it('renders with attributes', () => {
-      const $ = render('input', examples.attributes)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('data-attribute')).toBe('my data value')
-    })
-
-    it('renders with a form group wrapper that has extra classes', () => {
-      const $ = render('input', examples['with optional form-group classes'])
-
-      const $formGroup = $('.govuk-form-group')
-      expect($formGroup.hasClass('extra-class')).toBeTruthy()
-    })
-
-    it("doesn't render the input wrapper", () => {
-      const $ = render('input', examples.default)
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect($wrapper.length).toBeFalsy()
-    })
-  })
-
-  describe('when it includes a hint', () => {
-    it('renders the hint', () => {
-      const $ = render('input', examples['with hint text'])
-
-      expect(htmlWithClassName($, '.govuk-hint')).toMatchSnapshot()
-    })
-
-    it('associates the input as "described by" the hint', () => {
-      const $ = render('input', examples['with hint text'])
-
-      const $input = $('.govuk-input')
-      const hintId = $('.govuk-hint').attr('id')
-
-      const describedBy = new RegExp(
-        `${WORD_BOUNDARY}${hintId}${WORD_BOUNDARY}`
-      )
-
-      expect($input.attr('aria-describedby')).toMatch(describedBy)
-    })
-
-    it('associates the input as "described by" the hint and parent fieldset', () => {
-      const $ = render('input', examples['hint with describedBy'])
-
-      const $input = $('.govuk-input')
-      const hintId = $('.govuk-hint').attr('id')
-
-      const describedBy = new RegExp(
-        `${WORD_BOUNDARY}test-target-element${WHITESPACE}${hintId}${WORD_BOUNDARY}`
-      )
-
-      expect($input.attr('aria-describedby')).toMatch(describedBy)
-    })
-  })
-
-  describe('when it includes an error message', () => {
-    it('renders the error message', () => {
-      const $ = render('input', examples['with error message'])
-
-      expect(htmlWithClassName($, '.govuk-error-message')).toMatchSnapshot()
-    })
-
-    it('associates the input as "described by" the error message', () => {
-      const $ = render('input', examples['with error message'])
-
-      const $input = $('.govuk-input')
-      const errorMessageId = $('.govuk-error-message').attr('id')
-
-      const describedBy = new RegExp(
-        `${WORD_BOUNDARY}${errorMessageId}${WORD_BOUNDARY}`
-      )
-
-      expect($input.attr('aria-describedby')).toMatch(describedBy)
-    })
-
-    it('associates the input as "described by" the error message and parent fieldset', () => {
-      const $ = render('input', examples['error with describedBy'])
-
-      const $input = $('.govuk-input')
-      const errorMessageId = $('.govuk-error-message').attr('id')
-
-      const describedBy = new RegExp(
-        `${WORD_BOUNDARY}test-target-element${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
-      )
-
-      expect($input.attr('aria-describedby')).toMatch(describedBy)
-    })
-
-    it('includes the error class on the input', () => {
-      const $ = render('input', examples['with error message'])
-
-      const $component = $('.govuk-input')
-      expect($component.hasClass('govuk-input--error')).toBeTruthy()
-    })
-
-    it('renders with a form group wrapper that has an error state', () => {
-      const $ = render('input', examples['with error message'])
-
-      const $formGroup = $('.govuk-form-group')
-      expect($formGroup.hasClass('govuk-form-group--error')).toBeTruthy()
-    })
-  })
-
-  describe('when it has the spellcheck attribute', () => {
-    it('renders with spellcheck attribute set to true', () => {
-      const $ = render('input', examples['with spellcheck enabled'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('spellcheck')).toBe('true')
-    })
-
-    it('renders with spellcheck attribute set to false', () => {
-      const $ = render('input', examples['with spellcheck disabled'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('spellcheck')).toBe('false')
-    })
-
-    it('renders without spellcheck attribute by default', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('spellcheck')).toBeUndefined()
-    })
-  })
-
-  describe('when it has the autocapitalize attribute', () => {
-    it('renders without autocapitalize attribute by default', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-input')
-      expect($component.attr('autocapitalize')).toBeUndefined()
-    })
-
-    it('renders with autocapitalize attribute when set', () => {
-      const $ = render('input', examples['with autocapitalize turned off'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('autocapitalize')).toBe('none')
-    })
-  })
-
-  describe('when it includes both a hint and an error message', () => {
-    it('associates the input as described by both the hint and the error message', () => {
-      const $ = render('input', examples['with error and hint'])
-
-      const $component = $('.govuk-input')
-      const errorMessageId = $('.govuk-error-message').attr('id')
-      const hintId = $('.govuk-hint').attr('id')
-
-      const describedByCombined = new RegExp(
-        `${WORD_BOUNDARY}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
-      )
-
-      expect($component.attr('aria-describedby')).toMatch(describedByCombined)
-    })
-
-    it('associates the input as described by the hint, error message and parent fieldset', () => {
-      const $ = render('input', examples['with error, hint and describedBy'])
-
-      const $component = $('.govuk-input')
-      const errorMessageId = $('.govuk-error-message').attr('id')
-      const hintId = $('.govuk-hint').attr('id')
-
-      const describedByCombined = new RegExp(
-        `${WORD_BOUNDARY}test-target-element${WHITESPACE}${hintId}${WHITESPACE}${errorMessageId}${WORD_BOUNDARY}`
-      )
-
-      expect($component.attr('aria-describedby')).toMatch(describedByCombined)
-    })
-  })
-
-  describe('with dependant components', () => {
-    it('have correct nesting order', () => {
-      const $ = render('input', examples.default)
-
-      const $component = $('.govuk-form-group > .govuk-input')
-      expect($component.length).toBeTruthy()
-    })
-
-    it('renders with label', () => {
-      const $ = render('input', examples.default)
-
-      expect(htmlWithClassName($, '.govuk-label')).toMatchSnapshot()
-    })
-
-    it('renders label with "for" attribute reffering the input "id"', () => {
-      const $ = render('input', examples.default)
-
-      const $label = $('.govuk-label')
-      expect($label.attr('for')).toBe('input-example')
-    })
-  })
-
-  describe('when it includes an autocomplete attribute', () => {
-    it('renders the autocomplete attribute', () => {
-      const $ = render('input', examples['with autocomplete attribute'])
-
-      const $component = $('.govuk-input')
-      expect($component.attr('autocomplete')).toBe('postal-code')
-    })
-  })
-
-  describe('when it includes an inputmode', () => {
-    it('renders with an inputmode attached to the input', () => {
-      const $ = render('input', examples.inputmode)
-
-      const $component = $('.govuk-form-group > .govuk-input')
-      expect($component.attr('inputmode')).toBe('decimal')
-    })
-  })
-
-  describe('when it includes a prefix', () => {
-    it('renders the input wrapper', () => {
-      const $ = render('input', examples['with prefix'])
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect($wrapper.length).toBeTruthy()
-    })
-
-    it('renders the prefix inside the wrapper', () => {
-      const $ = render('input', examples['with prefix'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-      expect($prefix.length).toBeTruthy()
-    })
-
-    it('renders the text in the prefix', () => {
-      const $ = render('input', examples['with prefix'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-
-      expect($prefix.html()).toBe('£')
-    })
-
-    it('allows prefix text to be passed whilst escaping HTML entities', () => {
-      const $ = render('input', examples['with prefix with html as text'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-
-      expect($prefix.html()).toBe('&lt;span&gt;£&lt;/span&gt;')
-    })
-
-    it('allows prefix HTML to be passed un-escaped', () => {
-      const $ = render('input', examples['with prefix with html'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-
-      expect($prefix.html()).toBe('<span>£</span>')
-    })
-
-    it('hides the prefix from screen readers using the aria-hidden attribute', () => {
-      const $ = render('input', examples['with prefix'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-      expect($prefix.attr('aria-hidden')).toBe('true')
-    })
-
-    it('renders with classes', () => {
-      const $ = render('input', examples['with prefix with classes'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-      expect(
-        $prefix.hasClass('app-input__prefix--custom-modifier')
-      ).toBeTruthy()
-    })
-
-    it('renders with attributes', () => {
-      const $ = render('input', examples['with prefix with attributes'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-      expect($prefix.attr('data-attribute')).toBe('value')
-    })
-  })
-
-  describe('when it includes a suffix', () => {
-    it('renders the input wrapper', () => {
-      const $ = render('input', examples['with suffix'])
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect($wrapper.length).toBeTruthy()
-    })
-
-    it('renders the suffix inside the wrapper', () => {
-      const $ = render('input', examples['with suffix'])
-
-      const $suffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix'
-      )
-      expect($suffix.length).toBeTruthy()
-    })
-
-    it('renders the text in the prefix', () => {
-      const $ = render('input', examples['with prefix'])
-
-      const $prefix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix'
-      )
-
-      expect($prefix.html()).toBe('£')
-    })
-
-    it('allows suffix text to be passed whilst escaping HTML entities', () => {
-      const $ = render('input', examples['with suffix with html as text'])
-
-      const $suffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix'
-      )
-
-      expect($suffix.html()).toBe('&lt;span&gt;kg&lt;/span&gt;')
-    })
-
-    it('allows suffix HTML to be passed un-escaped', () => {
-      const $ = render('input', examples['with suffix with html'])
-
-      const $suffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix'
-      )
-
-      expect($suffix.html()).toBe('<span>kg</span>')
-    })
-
-    it('hides the suffix from screen readers using the aria-hidden attribute', () => {
-      const $ = render('input', examples['with suffix'])
-
-      const $suffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix'
-      )
-      expect($suffix.attr('aria-hidden')).toBe('true')
-    })
-
-    it('renders with classes', () => {
-      const $ = render('input', examples['with suffix with classes'])
-
-      const $suffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix'
-      )
-      expect(
-        $suffix.hasClass('app-input__suffix--custom-modifier')
-      ).toBeTruthy()
-    })
-
-    it('renders with attributes', () => {
-      const $ = render('input', examples['with suffix with attributes'])
-
-      const $suffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix'
-      )
-      expect($suffix.attr('data-attribute')).toBe('value')
-    })
-  })
-
-  describe('when it includes both a prefix and a suffix', () => {
-    it('renders the prefix before the suffix', () => {
-      const $ = render('input', examples['with prefix and suffix'])
-
-      const $prefixBeforeSuffix = $(
-        '.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix ~ .govuk-input__suffix'
-      )
-      expect($prefixBeforeSuffix.length).toBeTruthy()
-    })
-  })
-
-  describe('when it includes the input wrapper', () => {
-    it('renders the input wrapper with custom classes', () => {
-      const $ = render('input', examples['with customised input wrapper'])
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect(
-        $wrapper.hasClass('app-input-wrapper--custom-modifier')
-      ).toBeTruthy()
-    })
-
-    it('renders the input wrapper with custom attributes', () => {
-      const $ = render('input', examples['with customised input wrapper'])
-
-      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
-      expect($wrapper.attr('data-attribute')).toBe('value')
-    })
-  })
-})