Как лучше всего протестировать компонент React, экспортированный в withRouter ()

Question

У меня компонент экспортируется следующим образом.

export default withRouter(injectIntl(MyComponent));

Я использую shallow для тестирования, но не могу проверить состояния и функции. Как это сделать?

Answer 1

При тестировании мелких созданных компонентов, обернутых HO C, для получения необернутого компонента необходимо использовать dive().

const wrapper = enzyme.shallow(<MyComponent />).dive();

Если вы использовали mount, то подумайте, как это будет достаточно:

const wrapper = enzyme.mount<MyComponent />).childAt(0);

в вашем случае вы выглядите так, как будто у вас есть два HO C, и вам, возможно, придется дважды вызывать погружение. (dive().dive())

Answer 2

Проверьте, имеет ли экспортируемый вами компонент доступ к props.history. Поле history добавляется к props объекта, если он вызывается тегом <Route> или вы используете метод withRouter() для его экспорта.

То есть в JS файл этого компонента, добавьте console.log(props.history) внутри компонента. Если значение не равно NULL, экспорт withRouter() правильно работает с вашим компонентом.