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

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 đăng nào về nông 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 nông và kết xuất trong thử nghiệm các thành phần phản ứng? Dựa trên tài liệu airbnb, tôi đã đưa ra một số ý kiến ​​về sự khác biệt của cả hai:

1. Vì cạn đang kiểm tra 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, Giấy gói, v.v.)

2. Render dành 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 khó khăn trong việc 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 chúng rất giống nhau)

Vì vậy, làm thế nào để tôi biết cái nào để sử dụng trong một tình huống cụ thể?

Theo tài liệu Enzyme :

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

so với

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

so với

renderđược sử dụng để hiển thị các thành phần phản ứng với HTML tĩnh và phân tích cấu trúc HTML kết quả.

Bạn vẫn có thể nhìn thấy các "nút" bên dưới trong một kết xuất nông, vì vậy, ví dụ: bạn có thể làm điều gì đó như ví dụ này (hơi giả tạo) bằng cách sử dụng AVA làm trình chạy thông số:

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));
});

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

Tuy nhiên, bạn sẽ không thể có được vòng đời đầy đủ 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 để theo dõi thành phần củacomponentDidMount

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 trôi qua với kết xuất nông hoặc kết xuất

render sẽ chỉ cung cấp cho bạn 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);
});

hi vọng điêu nay co ich!

Sự khác biệt giữa nông () và mount () là nông () kiểm tra các thành phần riêng biệt với các thành phần con mà chúng hiển thị trong khi mount () đi sâu hơn và kiểm tra con của một thành phần.

Đối với nông (), điều này có nghĩa là nếu thành phần mẹ hiển thị một thành phần khác không thể hiển thị, thì một kết xuất nông () trên thành phần mẹ sẽ vẫn vượt qua.