如何在基於事件的React組件上測試類更改

我正在構建React應用程序，但我想測試某些功能，但是我不知道應該如何測試它。如何在基於事件的React組件上測試類更改

首先，我使用React和ReactDOM版本15.4.2

我有表示輸入按鈕組件。

class InnovanaInputBox extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = this.initializeState(); 

     // Bind all the event handlers. 
     this.onChange = this.onChange.bind(this); 
    } 

    initializeState() { 
     return { 
      hasValue: false 
     } 
    } 

    onChange(event) { 
     this.setState(
      { 
       hasValue: event.target.value !== "" 
      } 
     ); 
    } 

    render() { 
     return (
      <div className={"innovana-input-box" + 
          (typeof(this.props.className) !== typeof(undefined) && 
          this.props.className !== "" ? " " + this.props.className: "") + 
          (this.state.hasValue ? " value" : "")}> 

       <input type="text" onChange={this.onChange} /> 
       <label>{this.props.label}</label> 
      </div> 
     ); 
    } 
} 

InnovanaInputBox.PropTypes = { 
    label: React.PropTypes.string.isRequired 
} 

export default InnovanaInputBox;

所以，當我進入該組件內部的輸入框的值，狀態hasValue不會改變true輸入框內不包含值。

在render方法中，它在容器組件上設置了一個名爲value的附加類。

現在，我該如何測試這種特定的行爲？

我有Karma和Mocha設置，我正在使用react-addons-test-utils版本15.4.2。

我已經有一些基本的測試，看看組件是否呈現，但測試這似乎有點困難。

我想玩Simulate和findReferedDOMComponentWithClass，但我不明白。

有關如何測試這個的任何建議？

類regads

來源

2017-04-04 Complexity

你沒有指定的類裁判，所以另一種方式來獲得元素來測試一個元素有一類是去做這樣的。

const input = document.getElementsByClassName('innovana-input-box')[0]; 
input.classList.contains('value'); // true

現在如果有一個以上的你可能想的元素要麼指定一個ID，並使用document.getElementById()代替。或添加ref輸入和使用

More about refs here

編輯：

，如果你想測試組件的狀態值，你可以做這樣的事情

const inputBox = TestUtils.renderIntoDocument(<InnovanaInputBox />); 
const input = React.findDOMNode(inputBox).querySelector('input'); 
input.value = 'some updated value'; 
TestUtils.Simulate.change(input); 

inputBox.state.hasValue // true

來源

2017-04-04 20:20:04

謝謝，但問題不在於檢查它是否具有類，而是關於模擬組件中輸入字段的更改。然後該更改應該觸發一個狀態更改，它應該更新類，這是我想要測試的。另外，在我的問題中，我引用了React Test Utils，而上面的代碼是普通的JavaScript，所以我有點困惑。 – Complexity

@Complexity我不認爲我在這裏跟着你......如果你要測試你的狀態是否已更新，並且該類是應用於輸入元素的..我們可以將它分解爲兩個斷言。所以首先你要測試的狀態改變，然後你想測試該元素有一個類應用到它。我在回答中給出的是一種測試該類是否應用於輸入元素的方法。你不需要使用測試工具來檢查一個類是否被應用。話雖如此。當你使用測試實用程序並渲染到文檔中時。你有一個返回值。讓我更新我的答案 –

如何在基於事件的React組件上測試類更改

回答

相關問題