測試用玩笑形式和應對JS TestUtils

我有一個表格有三個單選按鈕像如下（假名）：測試用玩笑形式和應對JS TestUtils

<form className="myForm" onSubmit={this.done}> 
    <input className="myRadio" checked={ŧrue} type="radio" name="myRadio" onChange={this.change} value="value1" 
    <input className="myRadio" type="radio" name="myRadio" onChange={this.change} value="value2" 
    <input className="myRadio" type="radio" name="myRadio" onChange={this.change} value="value3" 
<input type="submit" className="submit" /> 
</form>

，我有很努力的時間來測試的onChange和的onsubmit事件。

inputs = TestUtils.scryRenderedDOMComponentsWithClass(MyComponentRendered, 'myRadio'); 
myForm = TestUtils.findRenderedDOMComponentWithClass(MyComponentRendered, 'myForm');

我有這樣一個測試：

it("changes the checked state when clicked", function() { 
    MyComponent.change = jest.genMockFunction(); 

    expect(inputs[0].getDOMNode().checked).toBe(true); 
    TestUtils.Simulate.change(inputs[1], {target: {value: 'value2'}}); 
    expect(inputs[0].getDOMNode().checked).toBe(false); 
    expect(inputs[1].getDOMNode().checked).toBe(true); 
    expect(inputs[2].getDOMNode().checked).toBe(false); 

    expect(MyComponent.change).toBeCalled(); //Fails 
    expect(MyComponent.change.mock.calls.length).toBe(1); //Fails too 
});

除了應調用的函數（MyComponent.change）這工作，但事實並非如此。

我也有一個測試的onsubmit：

it("saves on submit", function() 
    MyComponent.done = jest.genMockFunction(); 
    MyComponent.insideDone = jest.genMockFunction(); 
    TestUtils.Simulate.submit(myForm); 
    expect(MyComponent.done).toBeCalled(); //Fails 
    expect(MyComponent.insideDone).toBeCalled(); //Success 
});

注意：MyComponent.insideDone是由「完成」功能調用的函數。

也失敗了。我很確定這裏的問題是我沒有以正確的方式模擬事件。然而，我沒有找到使用React的Jest和TestUtils的例子。

來源

2014-10-20 Ferran Negre

我嘗試使用單擊事件提交表單，但最終沒有結果，但是幫助獲取表單元素本身並調用TestUtils.Simulate.submit（表單） – nimgrg 2014-10-21 12:58:26

至於更改函數，我可能會檢查MyComponent。 change.mock.calls.length等於1，以檢查模擬函數是否已被調用。 – nimgrg 2014-10-21 13:04:23

@nimgrg，那mock.calls.length也失敗了。我更新了我的答案。看起來就像最後一個例子，「完成」函數調用另一個函數......而那個函數調用了另一個函數。 – 2014-10-21 15:22:48

問題在於，在您已將原始功能賦予React之後，您正在替換該功能。表達式onSubmit={this.done}就是那個函數，它被設置爲事件處理程序。渲染函數完成後，您將替換instance.done，但React已獲得舊函數。你應該做的是不是：

<form className="myForm" onSubmit={() => this.done()}>

這將確保該事件處理程序總是調用的實例（您更換一個）的方法。這與將來與React兼容的副作用很好，因爲它們將停止將所有方法自動綁定到實例。

來源

2015-04-16 11:30:54

優秀的答案！我必須做的唯一更改是將事件傳遞給方法調用，然後將event.target.name添加到我正在生成的事件中，以使我的處理程序正常工作。 jsx代碼：'onChange = {（e）=> this._handleChange（e）}' – pherris 2015-04-17 01:57:06

太棒了！你介意把它作爲正確的答案嗎？ – 2015-04-17 05:09:41

會但它不是我的問題;）但我做了投票！ – pherris 2015-04-17 13:58:08

測試用玩笑形式和應對JS TestUtils

回答

相關問題