Question

我正在使用酶（airbnb）库来查找包装器。我的HTML就像

<div>
 <div></div>
<div></div>
<div></div>
</div>

我必须使用查找函数使用酶库选择嵌套的三个div。是否可以使用酶查找方法？

Answer 1

find方法接受css选择器，因此您可以使用wrapper.find('div > div')

Answer 2

您必须为所有嵌套的div添加类似的类。通过这种方式，您可以一起访问所有三个div。我认为这将是最干净的方式。假设您将此组件命名为“MyComponent”。测试套件将是：

 <div>
   <div className="sameclass"></div>
  <div className="sameclass"></div>
    <div className="sameclass"></div>
</div>

describe('MyComponent', () => {
  it('length of nested divs must be 3', () => {    
   const wrapper = mount(<Mycomponent/>)
    expect(wrapper.find('.sameclass').length).toEqual('3');      
     });
   })

Answer 3

我不建议在你的测试中做那种发现。如果你这样做，你的测试将与DOM实现高度相关，而这不是你想要的（我们也称之为脆弱的测试）。想象一下，你想要添加另一个div来封装所有其他的 - ＆gt;你的测试会失败（但不应该）

一个可靠的测试将使用类，组件（更好）或数据选择器（也更好，因为也独立于您的类实现）来定位特定div。

我将通过一些返工来举例：

以下是组件的渲染：

<div className="Card">
   <div>
     <div data-selector="Card-title">{this.props.title}</div>
   </div>
   <div data-selector="Card-description">{this.props.description}</div>
   <button data-selector="Card-button">{this.props.buttonLabel}</button>
</div>

现在是测试它的好方法:(使用Jest）

it('Should render a title', () => {
  const props = {title: 'Some Title'};
  const wrapper = shallow(<MyComponent {...props} />);

  const titleWrapper = wrapper.find({'data-selector': 'Card-title'});
  expect(titleWrapper).toHaveLength(1);
  expect(titleWrapper.text()).toEqual(props.title);
});

即使是按钮，最好定位数据选择器：如果明天你决定使用react Component而不是常规按钮，那么你的测试不会失败：）

酶

3 个答案: