Làm thế nào để chờ kết xuất hoàn chỉnh của thành phần React trong Mocha bằng Enzyme?

Question

Tôi có thành phần Parent hiển thị thành phần Child. Thành phần Child đầu tiên hiển thị các đạo cụ độc đáo như 'tên' và sau đó thành phần Gốc hiển thị các công cụ phổ biến như 'loại' và tiêm các đạo cụ đó vào thành phần Child sử dụng React.Children.map.

Vấn đề của tôi là Enzyme không thể phát hiện các đạo cụ phổ biến được hiển thị bởi thành phần Section vì vậy tôi không thể kiểm tra hiệu quả có hay không các đạo cụ chung đang được thêm vào.

Các thử nghiệm:

 const wrapper = shallow(
 
     <Parent title="Test Parent"> 
 
      <div> 
 
      <Child 
 
       name="FirstChild" 
 
      /> 
 
      </div> 
 
     </Parent> 
 
    ) 
 
//  console.log(wrapper.find(Child).node.props) <- returns only "name" in the object 
 
     expect(wrapper.find(Child)).to.have.prop("commonPropOne") 
 
     expect(wrapper.find(Child)).to.have.prop("commonPropTwo") 
 
     expect(wrapper.find(Child)).to.have.prop("commonPropThree")

Mã cho tiêm đạo cụ phổ biến:

const Parent = (props) => (
 
    <div 
 
    className="group" 
 
    title={props.title} 
 
    > 
 
    { React.Children.map(props.children, child => applyCommonProps(props, child)) } 
 
    </div> 
 
)

Answer 1

Bạn sẽ phải sử dụng enzyme của mount.

mount cung cấp cho bạn hiển thị DOM đầy đủ khi bạn cần đợi các thành phần hiển thị cho trẻ thay vì chỉ hiển thị một nút đơn lẻ như shallow.

Answer 2

Bạn có thể sử dụng bộ hẹn giờ để đặt sự kiện sẽ kéo lên sự kiện sẽ sau sự kiện khác. Bạn phải gọi thực hiện thủ công bằng cách sử dụng phương pháp này.

describe('<MyComponent />',() => { 
    it('My test.', (done) => { 
    const wrapper = mount(<MyComponent />); 

    setTimeout(() => { 
     expect(wrapper).toMatchSnapshot(); 
     done(); 
    }, 1); 
    }); 
}); 

React: Wait for full render in snapshot testing