Question: failed to read attribute 'tabIndex' when setAttribute in useEffect

const inputRef = useRef(null);
useEffect(() => {
    if (tabIndex){ // if tabIndex provided
      inputRef.current.setAttribute('tabindex', tabIndex);
    }
}, []);

return <div><input ref={inputRef} disabled={false} /></div>

test

const wrapper = mount(<Component tabIndex={10}/>);
console.log(wrapper.update().find('input').props()) 
expect(wrapper.update().find('input').props()['tabindex']).toEqual(10); // undefined
// => {
//   disabled: false
// }
// no tabIndex nor tabindex

Both of wrapper.update().find('input').props()['tabindex'] and wrapper.update().find('input').props()['tabIndex'] are undefined

Anything wrong here?

API

• shallow
• mount
• render

Version

library	version
enzyme	3.10.0
react	16.8.6
react-dom	16.8.6
react-test-renderer
adapter (below)	1.14.0

[edwardfxiao]

@ljharb https://github.com/edwardfhsiao/enzyme-hooks-test-repo Please check this out, npm i then npm run test or see the site run npm run server

[edwardfxiao]

@kanaabe I end up doing <Textarea {...attributes}> instead of <Textarea tabIndex={tabIndex} maxLength={maxLength} id={id} ...>.

Basically just not test it explicitly

import MyComponent from './textarea.js'
<MyComponent attributes={{tabIndex: 1, maxLength: 10, id="something" ...}}>