酶 - Mount无法通过id找到元素

Question

我构建包装器：

this.wrapper = mount(<App />, { context: this.store });

然后我尝试根据其id查找特定的HTML元素：

console.log("WRAPPER:", this.wrapper.debug());
return this.wrapper.find('#Form-input[0]-fields-field1');

包装器无法找到此元素。控制台日志输出如下：

WRAPPER:
<Many children/components down...>
    <input name="Form-input[0].fields.field1" onBlur={[Function]} onChange={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value="asdf" type="text" id="Form-input[0]-fields-field1" disabled={false} />
<Many more things after this...>

所以正确id的输入框肯定在那里。我是不是漏掉了什么？

- Infamous911

Answer 1

看起来您正在使用 ID 选择器 #Form-input[0]-fields-field1，但我认为对于CSS IDs，[ 和 ] 是无效的。也许您可以通过名称搜索输入框，input[name="Form-input[0]-fields-field1"] 是否可行？如果我错了，方括号实际上是可以的，您可能仍然需要在查询中转义它们！

- Alex Griffis

---

你是正确的！然而，似乎wrapper.find不允许转义字符。因此，我最终通过调用wrapper.find({ id: 'Form-input[0]-fields-field1' })来解决了这个问题，这很好地解决了它。 - Infamous911

很高兴你解决了它！我查看了Enzyme的存储库，寻找与此相关的问题 - 他们正在努力改进选择器的解决方案。 - Alex Griffis

是的，find函数的参数不像普通的CSS选择器字符串一样被处理，这点非常令人困惑！它似乎在寻找]字符时会忽略该字符后面的所有内容。 - Infamous911