reactjs - Hur man testar om en input-komponent är readOnly, React/Enzyme


Jag har designat en komponent i React som innehåller ett inmatningsfält som bara någonsin kan sättas och därför måste vara readOnly, men jag kan inte lista ut hur man testar om detta inmatningsfält är readOnly i Enzyme.

Jag kan inte hitta något om readOnly-attributet men någon hade en liknande fråga om att testa om ett input-fält är inaktiverat. Av detta verkar det som att jag skulle behöva använda något liknande koden nedan.

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

Men hasAttribute känns inte igen på typen ShallowWrapper och ingen av de andra metoderna i länken ovan översätts/fungerar/känns igen.

Bara för att klargöra, mitt inmatningsfält är nedan.

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

Har någon stött på detta tidigare? Hur skulle jag använda Enzyme för att testa att denna input är readOnly?

Svar #1

Eftersom det är en komponent som testas och inte sättet React renderar den till DOM, kan det vara:

expect(shallow(<Comp/>).find('div div input').prop('readOnly')).toBe(true);

Svar #2

I HTML DOM är attributet readonly, readOnly är React DOM-attributet. readonly kan vara readonly='true' eller bara readonly för att göra input icke-redigerbar.

Exempel HTML

<input type="text" name="country" value="Norge" readonly>

Så din testkod behöver kontrollera expect(select.find('div').find('div').find('input').hasAttribute('readonly', 'true').toBeTruthy();

Relaterade artiklar