Как я могу проверить компонент с setProps () фермента

Question

//in my component i have 

{this.props.auth.isLoadding && 
   <p className='text-info positionMessage'>Is registring...</p>
}

//in my test i have 

it('should start a new component with set props', () => {
const props = {
    auth: {
        isAuth: false,
        isLoadding: false
    }
}
    const wrapper = shallow(<ScreensCreateAccount {...props}/>)

    wrapper.setProps({isLoadding: true})
    //here is code for testing if <p>...</p> appeared. how can i do this?
})

мой компонент начинается с this.props.auth.isLoadding = false, и когда его значение меняется на true, html тоже меняется, добавляя <p className='text-info positionMessage'>Is registring...</p>.Как я могу проверить это, используя мелкий фермент?

Answer 1

Вот рабочий пример, который придерживается вашего кода: https://codesandbox.io/s/r7owz8mykm

В вашем коде вы просто забыли уровень аутентификации в вашем json для реквизита isLoading.

{isLoadding: true},вместо {auth: {isLoadding: true} }

Но имейте в виду, что поверхностный рендеринг и фермент не могут быть подходящим инструментом для тестирования вашего компонента React.Я использовал это немного, но теперь я использую реагирующую библиотеку: https://github.com/kentcdodds/react-testing-library, и я определенно доволен этим.Мои тесты теперь более высокого уровня и взаимодействуют с моими компонентами, как это делает настоящий пользователь.Я могу реорганизовать свой компонент, не нарушая моих тестов, с помощью фермента, ну, не так легко написать этот вид тестов.

Я действительно призываю вас хотя бы прочитать это и составить собственное мнение.

https://blog.kentcdodds.com/why-i-never-use-shallow-rendering-c08851a68bb7

Если у вас уже есть тесты с энзимом, то проблем нет, вы можете использовать обе библиотеки в одном проекте.