компонент поведения Тестирование (клик) в React-Native с Jest

Question

Пусть у меня есть этот компонент:

import React, { Component } from 'react'; 
import { Text, TouchableWithoutFeedback, View } from 'react-native'; 

class MyComp extends Component { 
    onRowPress() { 
    this.myCoolFunction(); 
    } 

    myCoolFunction() { 
    console.log('hi'); 
    } 

    render() { 
    return (
     <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}> 
     <View> 
      <Text>Hello World</Text> 
     </View> 
     </TouchableWithoutFeedback> 
    ); 
    } 
} 

export default MyComp; 

Как я могу идти о моделировании 1 клик на «TouchableWithoutFeedback» и убедившись, что «myCoolFunction» был назван ровно 1 раз?

Если это не обязательно, то я бы предпочел не добавлять больше зависимостей, кроме «реагирования» и «реакции-аддоны-тестовые утилиты».

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

У меня есть шутка/реакция/реакция родной в их последних версиях.

Редактировать: В Jest's official documentation говорится, что тесты DOM могут быть выполнены либо с ферментом, либо с TestUtils. Как я могу выполнить это с помощью TestUtils?

Answer 1

Я знаю, что вы не хотите добавить другую зависимость, но есть функция в библиотеке underscore называется once

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

Таким образом, вы будете уверены, что он был вызван один раз.

Answer 2

Я знаю, что этот ответ не приспосабливается к вашему требованию не использовать каких-либо дополнительных зависимостей, но я думаю, что вы не можете это сделать только с помощью Jest and Enzyme. Jest предоставляет вам функции runner, assertion и моментального снимка, а Enzyme выполняет все манипуляции с DOM и моделирование событий. Однако, чтобы знать, что ваша функция была вызвана ровно один раз, вам понадобится что-то другое (т. Е. Шпион). Мы используем sinon для этого, например, так:

... 
const onButtonClick = sinon.spy() 
const wrapper = shallow(<MyComponent onButtonClick={onButtonClick}/>) 
wrapper.find(`img`).first().simulate(`click`) 
wrapper.find(`img`).first().simulate(`click`) 
expect(onButtonClick.calledTwice).toBe(true) 
...