酶中的ShallowWrapper选择器

Question

我正在使用酶(airbnb)库来查找wrapper.my html是这样的

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

我必须选择嵌套的三个div使用酶文库使用find function.Is它可能使用酶查找方法?？

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来封装所有其他div -->您的测试将失败(但它不应该失败)

可靠的测试将使用类、组件(更好)或数据选择器(也更好，因为也独立于您的类实现)来针对特定的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组件而不是常规按钮，您的测试不会失败:)