Kiểm tra thành phần vi (nhấp chuột) trong Phản ứng-Native với jest

Question

Giả sử tôi có thành phần này:

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; 

Làm thế nào để tôi đi về mô phỏng 1 nhấp chuột vào 'TouchableWithoutFeedback' và đảm bảo rằng 'myCoolFunction' được gọi là chính xác 1 lần?

Nếu nó không phải là phải, sau đó tôi không muốn thêm phụ thuộc nhiều hơn khác 'phản ứng-dom' và 'phản ứng-addons-test-utils'.

Tôi thấy rất nhiều hướng dẫn tuyên bố điều này và điều đó nhưng tôi lo sợ chúng đã lỗi thời và tôi muốn chắc chắn rằng tôi sẽ không giải quyết một số cách giải quyết không cần thiết và làm đầy mã của tôi.

Tôi có phản ứng/phản ứng/bản địa trong các phiên bản mới nhất của họ.

Chỉnh sửa: Trong Jest's official documentation nó nói rằng các thử nghiệm DOM có thể được thực hiện với Enzyme hoặc TestUtils. Làm thế nào tôi có thể thực hiện điều này bằng cách sử dụng TestUtils?

Answer 1

Tôi biết bạn không muốn thêm phụ thuộc khác, nhưng có một chức năng trong thư viện underscore gọi once

Tạo một phiên bản của các chức năng mà chỉ có thể được gọi là một lần. Các cuộc gọi lặp lại đến hàm được sửa đổi sẽ không có hiệu lực, trả về giá trị từ cuộc gọi ban đầu.

Bằng cách này bạn sẽ chắc chắn nó được gọi một lần.

Answer 2

Tôi biết câu trả lời này không điều chỉnh theo yêu cầu của bạn về việc không sử dụng bất kỳ phụ thuộc bổ sung nào, nhưng tôi nghĩ bạn không thể làm điều đó chỉ với Jest và Enzyme. Jest cung cấp cho bạn chức năng runner, assertion và snapshot và Enzyme thực hiện tất cả các thao tác DOM và mô phỏng sự kiện. Tuy nhiên, để biết rằng chức năng của bạn được gọi chính xác một lần bạn sẽ cần một thứ khác (tức là gián điệp). Chúng tôi sử dụng sinon cho rằng, như vậy:

... 
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) 
...