using enzyme.mount(). SetProps z reagującym redux Provider

Question

Mam test, który ustawia rekwizyty, aby zaobserwować pewne zmiany w komponencie. Jedyną komplikacją jest to, że zawijam renderowany element w <Provider>, ponieważ w drzewie znajduje się kilka połączonych komponentów.

Mam renderowania poprzez

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

jestem następnie próbuje zaobserwować pewne zmiany przy użyciu następujących: jest

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

Problem, który setProps() nie jest ustawienie rekwizytów prawidłowo na zawinięty komponent. Zakładam, że to dlatego, że <Provider> nie przechodzi przez rekwizyty, ponieważ nie jest HoC. Czy istnieje lepszy sposób na przetestowanie tego niż zmiana lokalnych zmiennych rekwizytów i ponowne renderowanie?

Answer 1

Powinieneś wywoływać tylko setProps na opakowanym lub rodzica.

Dobra zasada jest taka, że ​​twój test powinien testować tylko jeden komponent (rodzic), więc ustawienie rekwizytów na dzieciach nie jest dozwolone z enzymem.

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

Jeśli masz dziecko w dalszej części, które musimy spełnić zależności dla sklepów (przez Dostawcę i kontekstu), to jest w porządku, ale te składniki dziecko powinno naprawdę mają własne pojedyncze testy.

W tym miejscu zachęcamy do napisania testu na zmianę na setProps.

Jeśli piszesz testy pojemnika lub złącza, naprawdę chciałbyś tylko sprawdzić, czy komponent podrzędny otrzymuje poprawne rekwizyty i/lub stan. Na przykład:

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

Jeszcze jedna wskazówka jest to, że pomaga zrozumieć różnicę pomiędzy płytkie i zamontować tak, że nie są niepotrzebnie szydząc zależności dla dzieci w teście, górna odpowiedź tutaj jest dobry odczyt:

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