sử dụng enzyme.mount(). SetProps với nhà cung cấp phản ứng-redux

Question

Tôi có một thử nghiệm là thiết lập đạo cụ, để quan sát một số thay đổi trong thành phần. Biến chứng duy nhất là tôi đang gói phần tử kết xuất trong một <Provider> vì có một số thành phần được kết nối tiếp tục xuống dưới cây.

Tôi render qua

const el =() => <MyComponent prop1={ prop1 } />; 
const wrapper = mount(<Provider store={store}>{ el() }</Provider>); 

tôi sau đó cố gắng để thực hiện một số thay đổi bằng cách sử dụng như sau:

wrapper.setProps({ /* new props */ }); 
// expect()s etc. 

Vấn đề là setProps() không thiết lập các đạo cụ đúng trên bọc thành phần. Tôi cho rằng điều này là bởi vì <Provider> không thực sự truyền đạo cụ thông qua vì nó không phải là một HoC. Có cách nào tốt hơn để kiểm tra điều này hơn là chỉ thay đổi các biến prop được kích hoạt cục bộ và tái rendering?

Answer 1

Bạn chỉ nên gọi số setProps trên thành phần được bao bọc hoặc cấp độ gốc.

Một nguyên tắc nhỏ là thử nghiệm của bạn chỉ nên thử nghiệm một thành phần duy nhất (phụ huynh), do đó, đặt đạo cụ trên trẻ em không được phép với enzyme.

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md#setpropsnextprops--self

Nếu bạn có các thành phần con tiếp tục xuống mà chúng ta cần để đáp ứng lưu trữ phụ thuộc cho (thông qua nhà cung cấp và bối cảnh), thì đó là tốt, nhưng những thành phần con thực sự cần phải kiểm tra cách ly riêng của họ.

Đó là nơi bạn được khuyến khích viết bài kiểm tra thay đổi theo số setProps.

Nếu bạn thấy mình đang viết kiểm tra cho vùng chứa hoặc trình kết nối, bạn thực sự chỉ muốn xác minh rằng thành phần con đang nhận đúng đạo cụ và trạng thái. Ví dụ:

import { createMockStore } from 'mocks' 
import { shallwo } from 'enzyme' 
// this component exports the redux connection 
import Container from '../container' 

const state = { foo: 'bar' } 

let wrapper 
let wrapped 
let store 

beforeEach(() => { 
    store = createMockStore(state) 
    wrapper = shallow(<Container store={store} />) 
    wrapped = wrapper.find('MyChildComponent') 
}) 

it('props.foo',() => { 
    const expected = 'bar' 
    const actual = wrapped.prop('foo') 
    expect(expected).toEqual(actual) 
}) 

Một mẹo khác là nó giúp để hiểu sự khác biệt giữa nông và gắn kết để bạn không phải không cần thiết chế giễu phụ thuộc cho trẻ em trong một thử nghiệm, câu trả lời đầu đây là một đọc tốt:

When should you use render and shallow in Enzyme/React tests?