React TestUtils模拟焦点

Question

I'm trying to test focusing on one of my custom React Components.

It returns an Input React component with an onFocus handler.

Here is my test:

let hasCalledFocus = false
const myInput = TestUtils.renderIntoDocument(
    <MyInput
        focusHandler={() => {
            console.log('focus')
            hasCalledFocus = true
        }}
        hasFocus={false}
        text=''
    />
)

const input = TestUtils.scryRenderedComponentsWithType(myInput, Input)
expect(hasCalledFocus).to.eql(false)
TestUtils.Simulate.focus(input[0])
expect(hasCalledFocus).to.eql(true)

When I make these exact calls on a non-React component, using const input = TestUtils.scryRenderedDOMComponentsWithTag(myInput, 'div') , everything works as expected. The focusHandler method I pass to the component is called and the test passes. For some reason, I can't get it to focus on my React component.

Anyone have any ideas as to what could be going on here? I'm pretty stumped.

Answer 1

I found the issue. I wasn't handling type explicitly in my custom MyInput component class. I am usually just passing it as a prop when I create MyInput , like so: <MyInput type='text' ... /> , but I had left that out of my test by accident.

So the test couldn't find the component because it didn't know what kind of Input type it's supposed to render.