maxlength attribute is ignored

(Source: how to test input maxlength attribute).

---

• dom-testing-library version: 5.6.1
• react version: -
• node version: 10.16
• npm version: 6.9

Relevant code or config:

import { getByRole, fireEvent } from '@testing-library/dom'

test('maxlength', () => {
  const div = document.createElement('div')
  div.innerHTML = `<input type="text" maxlength="10" />`

  const input = getByRole(div, 'textbox')

  fireEvent.input(input, { target: { value: '01234657890123456789' }})

  expect(input.maxLength).toBe(10)
  expect(input.value).toBe('0123456789') // <-- fails
})

What happened:

Expected the test above to pass.

  ● maxlength

    expect(received).toBe(expected) // Object.is equality

    Expected: "0123456789"
    Received: "01234657890123456789"

      26 | 
      27 |   expect(input.maxLength).toBe(10)
    > 28 |   expect(input.value).toBe('0123456789') // <-- fails
         |                       ^
      29 | })
      30 | 

      at Object.toBe (src/Input.spec.js:16:23)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.332s, estimated 1s

This might be an expected behavior (not sure if an Event should honor maxlength attribute), but felt weird. I thought about this a bit and explore some ideas, but couldn’t come up with a fix.

Tried with RTL and VTL and both failed too, obviously.

[niltonvasques]

I could test it using the userEvent library:

  it('should not support more than 10000 chars', () => {
    expect(input.maxLength).toBe(10000)
    const text = 'loong text'
    const longText = text.repeat(999)

    fireEvent.change(input, { target: { value: longText } })
    userEvent.type(input, text + '!')
    expect(input.value).toBe(text.repeat(1000))
    expect(input.value.length).toBe(10000)
  })

[kentcdodds]

maxlength is imposed on the user who’s interacting with the field, but not on imperative code changing the field. I think we may be able to take it into account in user-event, but here in DTL, I think we should leave it as-is.

If you wanted to test maxlength, then I’d just assert the attribute is set properly and rely on the browser to deal with that properly.