酶 - 安装无法通过 id 找到元素答案

【问题标题】：Enzyme - Mount can't find element by id酶 - 安装无法通过 id 找到元素
【发布时间】：2018-01-02 11:13:04
【问题描述】：

我构造了包装器：

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

然后我尝试通过它的 id 找到某个 HTML 元素：

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

包装器无法找到该元素。 console.log 的输出如下：

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 的输入肯定存在。我错过了什么吗？

【问题讨论】：

标签： javascript reactjs redux react-redux enzyme

【解决方案1】：

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

【讨论】：

你是对的！但是，似乎 wrapper.find 不允许转义字符。因此，我最终通过调用 wrapper.find({ id: 'Form-input[0]-fields-field1' }) 解决了这个问题。
很高兴你修好了！我检查了 Enzyme 的 repo 是否存在与此相关的问题 - 他们正在研究改进选择器的解决方案。
是的，find 的参数没有像普通的 css 选择器字符串一样处理，这非常令人困惑！它似乎在寻找 ] 字符，此时它会忽略该字符之后的所有其他内容。