Enzym: Stateless Functional Component liefert undefined Requisiten

Question

Ich habe eine SFC, die ich mit enzym flachen Rendering testen. Ich übergebe ein Style-Objekt mit Inline-Styles als Requisiten an diese zustandslose Komponente. Wenn ich jedoch Unit-Test anwende, gibt es undefined zurück. Ich bin mir nicht sicher, ob das in Ordnung ist, da ich verstehe, dass diese Komponente einfach alles zurückgibt, was ihr als Requisiten übergeben wird, und da nichts passiert ist, gibt es mir undefiniert. Gibt es einen Workaround dafür?

const LoginForm = ({ style, handleSubmit }) => { 
    return (
    <form onSubmit={handleSubmit}> 
     <div style={_.get(style, 'container')}> 
     {inputFields} 
     </div> 
    </form> 
); 
}; 

Test:

it('should apply styles to first div',() => { 
     const wrapper = shallow(<LoginForm style={{display: 'inline'}}/>); 
     expect(wrapper.find('div').first().prop('style')).to.eql({display: 'inline'}); 
     }); 

Answer 1

Es gibt ein paar Gründe, warum dies fehlschlagen würde.

Zuerst sieht es so aus, als ob Sie die Enzym-Wrapper-API falsch verwenden.

Wenn Sie eine spezifische Requisite von einem flachen Wrapper erhalten möchten, müssen Sie .props() verwenden (mit anderen Worten, Sie haben das 's' vergessen).

wrapper.find('div').first().props('style') 

Aber auch mit dieser Korrektur wird Ihr Test noch scheitern, weil in Ihrem Test, sind Sie {display: 'inline'} als style prop vorbei, aber Sie suchen eine Immobilie container in Ihrer Implementierung genannt. Ich nehme an, Sie verwenden lodash.get, die gets the value at the path of an object. Da das Objekt, das Sie liefert keinen container Eigenschaft, die style Stütze des div wird {style: undefined} gleich sein, und der Test fehl, wenn man versucht, diese