Question

我正在尝试专注于我的一个自定义React组件。

它返回一个带有Input处理程序的onFocus 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')对非React组件进行这些精确调用时，一切都按预期工作。我传递给组件的focusHandler方法被调用并且测试通过。出于某种原因，我无法专注于我的React组件。

任何人都对这里发生的事情有任何想法？我很难过。

Answer 1

我发现了这个问题。我没有在自定义type组件类中显式处理MyInput。我通常只是在创建MyInput时将其作为道具传递，就像这样：<MyInput type='text' ... />，但我不小心将其遗漏了。

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

React TestUtils模拟焦点

1 个答案: