Khi nào bạn nên sử dụng kết xuất và cạn trong các thử nghiệm Enzyme/React?

Question

trước khi đăng câu hỏi này, tôi đã cố gắng tìm kiếm trong sqa stackexchange nhưng tôi không tìm thấy bài về nông cạn và hiển thị ở đó, vì vậy tôi hy vọng ai đó có thể giúp tôi ở đây.

Khi nào tôi nên sử dụng cạn và hiển thị trong thử nghiệm các thành phần phản ứng? Dựa trên các tài liệu Airbnb, tôi đã thực hiện một số ý kiến ​​về sự khác biệt của hai:

1. Kể từ nông đang thử nghiệm các thành phần như một đơn vị, vì vậy nó nên được sử dụng cho các thành phần 'mẹ'. (ví dụ: Bảng, Máy đóng gói, v.v ..)

2. Hiển thị cho các thành phần con.

Lý do tôi hỏi câu hỏi này, là tôi đang gặp một thời gian khó khăn để tìm ra cái nào tôi nên sử dụng (mặc dù các tài liệu nói rằng họ đang rất tương tự)

Vì vậy, làm thế nào thế nào để tôi biết cái nào để sử dụng trong một kịch bản cụ thể?

Answer 1

Theo Enzyme docs:

mount(<Component />) cho dựng hình Full DOM là lý tưởng cho các trường hợp sử dụng, nơi bạn có thành phần có thể tương tác với apis DOM, hoặc có thể yêu cầu toàn bộ vòng đời để kiểm tra đầy đủ các thành phần (ví dụ: , componentDidMount vv)

vs

shallow(<Component />) cho render Shallow rất hữu ích để hạn chế bản thân để thử nghiệm một phần như một đơn vị, và để đảm bảo rằng các xét nghiệm của bạn không được gián tiếp khẳng định về hành vi của các thành phần con.

vs

render được sử dụng để làm cho phản ứng linh kiện để HTML tĩnh và phân tích kết quả cấu trúc HTML.

Bạn vẫn có thể thấy tiềm ẩn "nút" trong một nông render, ví dụ như vậy, bạn có thể làm một cái gì đó như thế này (hơi giả tạo) ví dụ sử dụng AVA như Á hậu spec:

let wrapper = shallow(<TagBox />); 

const props = { 
    toggleValue: sinon.spy() 
}; 

test('it should render two top level nodes', t => { 
    t.is(wrapper.children().length, 2); 
}); 

test('it should safely set all props and still render two nodes', t => { 
    wrapper.setProps({...props}); 
    t.is(wrapper.children().length, 2); 
}); 

test('it should call toggleValue when an x class is clicked', t => { 
    wrapper.setProps({...props}); 
    wrapper.find('.x').last().simulate('click'); 
    t.true(props.toggleValue.calledWith(3)); 
}); 

ý rằng hiển thị, đạo cụ thiết lập và tìm bộ chọn và thậm chí sự kiện tổng hợp đều được hỗ trợ bởi hiển thị cạn, vì vậy hầu hết thời gian bạn chỉ có thể sử dụng.

Nhưng, bạn sẽ không thể có được toàn bộ vòng đời của thành phần, vì vậy nếu bạn mong đợi những điều xảy ra trong componentDidMount, bạn nên sử dụng mount(<Component />);

thử nghiệm này sử dụng Sinon để do thám của thành phần componentDidMount

test.only('mount calls componentDidMount', t => { 

    class Test extends Component { 
     constructor (props) { 
      super(props); 
     } 
     componentDidMount() { 
      console.log('componentDidMount!'); 
     } 
     render() { 
      return (
       <div /> 
      ); 
     } 
    }; 

    const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount'); 
    const wrapper = mount(<Test />); 

    t.true(componentDidMount.calledOnce); 

    componentDidMount.restore(); 
}); 

trên sẽ không vượt qua với nông render hoặc làm

render sẽ cung cấp cho bạn với chỉ html, vì vậy bạn vẫn có thể làm những việc như sau:

test.only('render works', t => { 

    // insert Test component here... 

    const rendered = render(<Test />); 
    const len = rendered.find('div').length; 
    t.is(len, 1); 
}); 

hy vọng điều này sẽ hữu ích!