Как протестировать функцию в React через Jest?

Question

[bpGusar]

Функция находится внутри класса, например:

class Bla extends React.Component {
public Foo = (arg) =>{
// тут че нибудь делаем
} 
render(){
...
}
}

Как ее протестировать? Только начал изучать тестирование и уперся в стену, хз как это ваще. То есть ее надо экспортить, а потом в файл теста импортить? Или как? Что вообще делать правильно?

Answer 1

[Javid Asgarov]

Я отвечу в тех рамках, с которыми я знаком, как я тестирую и вижу это. Тестировать смысла нет методы в реакт компоненте. Я думаю подходить к этому, тестировать то как класс будет использоваться. Если этот метод отдельно будет где-то пользоваться, то надо подумать о его тестировании, если нет, то его предназначение как компонента эта функция render.

Для этого есть библиотеки как react-testing-library (про нее и на хабре была статья), а также Enzyme. Суть, что вы рендерите ваш компонент в тесте и смотрите, чтобы он давал правильные результаты. А что он делает внутри, это уже дело компонента.

С помощью coverage jest сможете посмотреть, какие методы были задействованы при условиях вашего теста. Например, если метод вызывается после клика на каком-то элементе внутри компонента, то можно использовать соответствующий триггер в тесте и "кликнуть" туда и убедиться, что нужные изменения произошли.

Если же этот метод делает какую-то важную логику, то возможно стоит переопределить его вне сущности реакта, создать отдельный класс или функцию и тестировать отдельно ее.