Enzyme: Функциональный компонент без учета состояния возвращает неопределенные реквизиты

Question

У меня есть SFC, который я тестирую с использованием мелкого рендеринга фермента. Я передаю объект стиля со встроенными стилями как опоры для этого компонента без гражданства. Однако, когда я применяю к нему единичный тест, он возвращает undefined. Я не уверен, что это нормально, поскольку я понимаю, что этот компонент просто возвращает все, что передается ему как реквизит, и поскольку ничего не передано/не передано, оно дает мне неопределенное. Есть ли обходной путь для этого?

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

Тест:

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

Там есть несколько причин, почему это не удастся.

Во-первых, похоже, что вы неправильно используете API-интерфейс фермента.

Если вы хотите получить конкретную опору из мелкой обертки, вам необходимо использовать .props() (другими словами, вы забыли «s»).

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

Однако даже при такой коррекции, ваш тест по-прежнему терпит неудачу, потому что в тесте, вы передаете {display: 'inline'} как style опоры, но вы ищете недвижимость под названием container в вашей реализации. Я предполагаю, что вы используете lodash.get, который gets the value at the path of an object. Поскольку объект вы подача не имеет container свойства, style подпирать DIV будет равен {style: undefined} и тест проваливается при попытке сравнить это {display: 'inline'}