如何测试输入组件是否为只读，反应/酶

Question

我在 react 中设计了一个组件，其中包含一个只能设置的输入字段，因此必须是只读的，但无法弄清楚如何在酶中测试这个输入是否是只读的。

我找不到有关 readOnly 属性的任何信息，但有人对测试输入是否禁用有类似的问题。 由此看来，我需要使用类似于以下代码的东西。

test('select button select input must be read only', () => {
expect(select.find('div').find('div').find('input').hasAttribute('readOnly', 'true').toBeTruthy();
});

但是，hasAttribute在 ShallowWrapper 类型上无法识别，并且上面链接中的其他方法均未被识别 translate/work/

。只是为了澄清我的输入字段如下。

<input readOnly={true} type="text" placeholder={selectedOption} />

以前有人遇到过这种情况吗？我将如何使用酶来测试此输入是否为只读？

Answer 1

由于它是一个经过测试的组件，而不是 React 将其呈现为 DOM 的方式，因此它可以是：

expect(shallow(<Comp/>).find('div div input').prop('readOnly')).toBe(true);

Answer 2

在HTML DOM属性中是readonly，readOnly是React DOM属性。 只读可以是readonly='true'的，也可以只是readonly，以使输入不可编辑。

示例网页

<input type="text" name="country" value="Norway" readonly>

所以你的测试代码需要检查expect(select.find('div').find('div').find('input').hasAttribute('readonly', 'true').toBeTruthy();