Тестирование реакционных компонентов с помощью Jest & Enzyme: где нужно проверить, были ли предоставлены опоры компонентов

Question

При написании тестов для компонентов React с использованием Jest & Enzyme, какие тесты должны отвечать за то, чтобы удостовериться, что компоненту дают определенные реквизиты?

<App> 
    <Somewhere> 
    <MyNestedComp someProps={someValue} /> 
    </Somewhere> 
</App> 

В приведенном выше примере, где мы должны проверить, чтобы MyNestedComp получил поддержку someProps. В настоящее время я тестирую каждый из моих компонентов и иногда немного путаюсь, где тестировать такие особенности.

Answer 1

Прежде всего, вы должны начать тестирование самого компонента, в котором вы проходите опору, независимо от того, доступен ли передаваемый прокси в самом компоненте или нет, соответствующий соответствующий html-рисунок правильно или нет.

Вы можете использовать мелкую визуализацию фермента, чтобы ограничить себя определенным компонентом, который вы тестируете.

например

Пусть в MyNestedComp Я использую прошел пропеллерsomeProps для отображения в некоторых HTML-элемента.

const MyNestedComp = ({someProps}) => { 
return (
     <div> 
      <h1>{someProps}</h1> 
     </div> 
) 
} 

испытания блока для MyNestedComp можно записать в виде -

const wrapper = shallow(<MyNestedComp someProps={"someValue"} />); 
expect(wrapper.html()).to.equal('<div><h1>someValue</h1></div>'); 

Тогда вы можете написать тестовый пример для родительского компонента, а также которые Somewhere в вашем примере. Вы можете проверить, правильно ли передается прокси, переданная из родительского компонента, на дочерний компонент или нет, и возможны многие другие тестовые примеры.

<Somewhere> 
    <MyNestedComp someProps={someValue} /> 
    </Somewhere> 

Unit тест для Где-то можно записать в виде -

const wrapper = shallow(  
     <Somewhere> 
     <MyNestedComp someProps={someValue} /> 
     </Somewhere> 
); 

const childWrapper = wrapper.find('MyNestedComp'); 
expect(childWrapper).to.have.length(1); 
expect(wrapper.find({someProps: 'someValue'})).to.have.length(1); 

expect(wrapper.prop('someProps')).to.equal("someValue"); 

Я надеюсь, что это помогает.