Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to test if an input component is readOnly, React/Enzyme

I've designed a component in react that contains an input field that can only ever be set and therefore must be readOnly but can't figure out how to test if this input is readOnly in Enzyme.

I can't find anything about the readOnly attribute but someone had a similar question to Test if an Input is disabled. from this it seems like I'd need to use something like the code below.

test('select button select input must be read only', () => {
    expect(select.find('div').find('div').find('input').hasAttribute('readOnly', 'true').toBeTruthy();
});

However hasAttribute is not recognised on type ShallowWrapper and none of the other methods in the link above translate/work/are recognised.

Just to clarify my input field is below.

<input readOnly={true} type="text" placeholder={selectedOption} />

Has anyone encountered this before? How Would I use Enzyme to test this input is readOnly?

like image 279
James Morrison Avatar asked Jun 04 '26 16:06

James Morrison


1 Answers

Since it's a component that is tested and not the way React renders it to DOM, it can be:

expect(shallow(<Comp/>).find('div div input').prop('readOnly')).toBe(true);
like image 145
Estus Flask Avatar answered Jun 06 '26 06:06

Estus Flask



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!