測試組件行爲（點擊）的陣營，本土與玩笑

假設我有這個組件：測試組件行爲（點擊）的陣營，本土與玩笑

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;

我怎麼去對「TouchableWithoutFeedback」模擬1次點擊，並確保「myCoolFunction」被稱爲正好1次？

如果不是必須的，那麼除了'react-dom'和'react-addons-test-utils'以外，我寧願不添加更多的依賴項。

我看到很多指南聲稱這個和那個，但我擔心他們已經過時了，我想確保我沒有經歷一些不必要的解決方法和膨脹我的代碼。

我有他/她的最新版本的原生/反應/反應。

編輯：在Jest's official documentation它說DOM測試可以用酶或TestUtils。我怎樣才能使用TestUtils來完成這個任務？

來源

2016-12-26 Tsury

採取從陣營的頁面看看這個[教程]（https://facebook.github.io/jest/docs/tutorial-react.html）。你應該測試的是Facebook建議的組件狀態，而不是如果已經執行了onClick。現在，如果點擊按鈕後你所期望的是另一個組件被調用，你應該嘲笑該組件。 –

正如你所看到的，我的onClick不會操縱狀態。此外，這些都是反應測試，因此訪問DOM更容易。 – Tsury

我知道你不想添加其他的依賴，但在underscore庫中的函數調用once

創建一個版本，只能被稱爲一個時間的函數。重複調用修改的函數將不起作用，從原始調用返回值。

這樣你就可以確定它被調用過一次。

來源

2016-12-26 15:18:28

你可能誤解了我。我想知道的是如何使用jest模擬點擊我的組件。 – Tsury

我知道這個答案並不適合您不使用任何額外的依賴關係的要求，但我認爲你不能僅僅用Jest和Enzyme來做到這一點。 Jest爲您提供了跑步者，斷言功能和快照測試，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) 
...

來源

2017-09-12 09:18:35 Alf

測試組件行爲（點擊）的陣營，本土與玩笑

回答

相關問題