thử nghiệm một hình thức với jest và Phản ứng TestUtils JS

Question

Tôi có một hình thức với 3 nút radio thích sau (tên giả):

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

Và Tôi gặp thời gian rất khó khăn cố gắng để kiểm tra onChange và các sự kiện onSubmit .

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

Tôi có một bài kiểm tra như:

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 
}); 

đó làm việc ngoại trừ chức năng (MyComponent.change) mà nên được gọi nhưng nó không phải là.

Tôi cũng có một thử nghiệm cho 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 
}); 

Chú ý: MyComponent.insideDone là một chức năng được gọi bằng chức năng 'làm'.

Điều gì cũng không thành công. Tôi khá chắc chắn rằng vấn đề ở đây là tôi không mô phỏng các sự kiện một cách chính xác. Tuy nhiên, tôi không tìm thấy ví dụ về điều này bằng cách sử dụng Jest và TestUtils từ React.

Answer 1

Vấn đề là bạn đang thay thế hàm sau khi bạn đã đưa hàm ban đầu vào React. Biểu thức onSubmit={this.done} là hàm đó và được đặt làm trình xử lý sự kiện. Sau khi hàm render kết thúc, bạn thay thế instance.done nhưng React đã có hàm cũ. Những gì bạn cần làm là thay vì:

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

Điều này đảm bảo rằng xử lý sự kiện luôn gọi phương thức trên dụ (một trong những bạn thay thế). Điều này có tác dụng phụ tốt đẹp của tương lai tương lai với React, vì chúng sẽ ngừng tự động liên kết tất cả các phương thức cho cá thể.