When typing in a disabled input onChange is still called

[roy-bakker-new10]

Test:

import React from 'react'
import { render } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

    it('should not call onChange function when typing in a disabled field', () => {
        const onChange = jest.fn()
        const { getByPlaceholderText } = render(
            <input
                disabled
                id="test-id"
                name="test-name"
                onChange={onChange}
                placeholder="placeholder"
            />
        )
        userEvent.type(getByPlaceholderText('placeholder'), 'foo')
        expect(onChange).not.toHaveBeenCalled()
    })

I expect this test to succeed but it isn't.

Output:

    Expected mock function not to be called but it was called with:
      [{"_dispatchInstances": null, "_dispatchListeners": null, "_targetInst": null, "bubbles": null, "cancelable": null, "currentTarget": [Function currentTarget], "defaultPrevented": null, "dispatchConfig": null, "eventPhase": null, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": null, "nativeEvent": null, "target": null, "timeStamp": [Function timeStamp], "type": null}], [{"_dispatchInstances": null, "_dispatchListeners": null, "_targetInst": null, "bubbles": null, "cancelable": null, "currentTarget": [Function currentTarget], "defaultPrevented": null, "dispatchConfig": null, "eventPhase": null, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": null, "nativeEvent": null, "target": null, "timeStamp": [Function timeStamp], "type": null}], [{"_dispatchInstances": null, "_dispatchListeners": null, "_targetInst": null, "bubbles": null, "cancelable": null, "currentTarget": [Function currentTarget], "defaultPrevented": null, "dispatchConfig": null, "eventPhase": null, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": null, "nativeEvent": null, "target": null, "timeStamp": [Function timeStamp], "type": null}]

[weyert]

Yes, at the moment we don't really check whether the input field is disabled or not.

Maybe this change is enough?
https://github.com/weyert/user-event/tree/ignore-disabled-elements

[Elecweb]

It's also happened in readOnly as well.

is it intended for not testing too much implementation?

[Gpx]

🎉 This issue has been resolved in version 6.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀