mit enzym.mount(). SetProps mit einem react-redux Provider

Question

Ich habe einen Test, der Requisiten setzt, um einige Änderungen in der Komponente zu beobachten. Die einzige Komplikation ist, dass ich das gerenderte Element in eine <Provider> umschließe, weil es einige verbundene Komponenten weiter unten im Baum gibt.

Ich bin Rendering über

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

ich dann unter Verwendung der folgenden einige Änderungen zu beobachten versuchen:

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

Das Problem ist, dass setProps() ist nicht die Requisiten richtig auf die Einstellung umwickelte Komponente. Ich nehme an, dass dies daran liegt, dass <Provider> Requisiten nicht wirklich durchlässt, da es kein HoC ist. Gibt es eine bessere Möglichkeit, dies zu testen, als nur die lokal begrenzten Prop-Variablen zu ändern und das Rendering erneut durchzuführen?

Answer 1

Sie sollten nur setProps für die umschlossene Komponente oder das übergeordnete Element aufrufen.

Eine gute Faustregel ist, dass Ihr Test nur eine einzelne Komponente (die Eltern) testen sollte, daher ist das Setzen von Requisiten auf Kinder mit Enzymen nicht erlaubt.

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

Wenn Sie Kind Komponenten weiter haben nach unten, dass wir speichern Abhängigkeiten erfüllen müssen (über Provider und Kontext), dann ist das in Ordnung, aber die untergeordneten Komponenten sollten wirklich haben ihre eigenen isolierten Tests.

Hier sollten Sie einen Test für eine Änderung auf setProps schreiben.

Wenn Sie Tests für einen Container oder Connector schreiben, möchten Sie nur überprüfen, ob die untergeordnete Komponente die richtigen Requisiten und/oder den Status erhält. Zum Beispiel:

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

Ein weiterer Tipp ist, dass es den Unterschied zwischen flachen und montieren zu verstehen hilft, so dass Sie nicht unnötig Abhängigkeiten für Kinder in einem Test, die Top-Antwort hier ist gut zu lesen spöttisch:

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