Question

我最初使用的是Select元素，进行查找并测试子项以查看选项是否包含期望值。但是从那以后，我开始使用带有数据列表的Input元素，以允许自由输入形式的文本以及选择选项，但是我看不到如何测试相同的东西。

我要测试的是输入元素已呈现，并且数据列表包含预期值。

我的React代码

<input type="text" list="categories" ref={this.categoryInput} className="Modal-Comment" name="CategoryInput" value={this.state.enteredCategory} onChange={ (e) => this.handleCategoryChanged(e)}/>
    <datalist id="categories">
        {this.groupOptions.map(o => this.MakeOption(o, this.state.enteredCategory))}
    </datalist>

和我以前测试过select元素的Enyzme测试代码

  const categorySelect = wrapper.find('select').find('[name="CategoryInput"]');
  expect(categorySelect.exists()).toEqual(true);
  expect(categorySelect.children().filterWhere(x => x.text() === 'Expected option 1').length).toEqual(1);
  expect(categorySelect.children().filterWhere(x => x.text() === 'Expected option 2').length).toEqual(1);

我知道我应该更改find（）来查找输入类型，这很好，但是后来我不知道如何在数据列表中查找生成的选项。我假设上面的测试代码返回0个匹配元素，因为数据列表不是输入的子级。在这种情况下，我应该如何测试？

Answer 1

由于datalist元素不是input元素的直接子元素，因此应为datalist元素创建一个单独的选择器：

const datalist = wrapper.find('#categories');

expect(datalist.children().length).toEqual(3);

Answer 2

也许您应该直接测试该方法（例如，MakeOption方法）-也许在这种情况下或在其他情况下无法通过props或state来测试结果，则可能会更好。

代码应如下所示：

const wrapper = shallow(<NameOfComponent />);
expect(wrapper.instance().methodName()).toEqual(someValue);

如何用酵素/笑话中的数据列表测试输入元素？

2 个答案: