React TestUtils模拟焦点

Question

我正在尝试将测试重点放在我的自定义React组件之一上。

它返回带有onFocus处理程序的Input React组件。

这是我的测试：

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)

当我在非反应组件上进行这些精确调用时，使用const input = TestUtils.scryRenderedDOMComponentsWithTag(myInput, 'div') ，一切都会按预期进行。 我传递给组件的focusHandler方法被调用，测试通过。 出于某种原因，我无法集中精力于我的React组件。

有人对这里可能发生的事情有任何想法吗？ 我很沮丧。

Answer 1

我发现了问题。 我没有在自定义MyInput组件类中显式处理type 。 创建MyInput时，我通常只是通过它作为道具，就像这样： <MyInput type='text' ... /> ，但是我无意中把它排除在了测试之外。

因此测试无法找到该组件，因为它不知道应该呈现哪种Input类型。