Question

我已经在react中设计了一个组件，该组件包含只能设置的输入字段，因此必须为readOnly，但无法弄清楚如何测试此输入是否在Enzyme中为readOnly。

我找不到任何有关readOnly属性的信息，但有人对Test if an Input is disabled有类似的问题。由此看来，我似乎需要使用类似下面的代码。

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

但是在ShallowWrapper类型上无法识别hasAttribute，并且上面的链接中的所有其他方法均无法识别翻译/工作/。

下面只是要澄清我的输入字段。

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

以前有人遇到过吗？我将如何使用酶来测试此输入是否为readOnly？

Answer 1

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

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

Answer 2

在HTML DOM属性中，new Date(Date.UTC(96, 1, 2, 3, 4, 5));是readonly，是React DOM属性。只读可以为readOnly或仅为readonly='true'，以使输入不可编辑。

示例HTML

readonly

因此您的测试代码需要检查 <input type="text" name="country" value="Norway" readonly>

如何测试输入组件是否为只读，React / Enzyme

2 个答案: