Testi Jest bir form ve 3 radyo düğmeleri aşağıdaki (sahte isim) gibi olan bir form var

Question

JS TestUtils tepki:

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

Ve Değiştiğinde ve onSubmit etkinliklerini test etmek için çalışırken çok zorlanıyorum .

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

Ben böyle bir test var: çağrılmalıdır fonksiyonu (MyComponent.change) dışında çalışan

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

ama değil.

Ben de onSubmit için bir test var:

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

Uyarı: MyComponent.insideDone 'done' işlevi tarafından çağrılan bir işlevdir.

Bu da başarısız. Buradaki problemin, olayları doğru bir şekilde simüle etmemem olduğuna eminim. Ancak, React'tan Jest ve TestUtils kullanarak bunun bir örneğini bulamadım.

Answer 1

Sorun, özgün işlevi zaten Reaktive verdikten sonra işlevi değiştirdiğinizden kaynaklanıyor. onSubmit={this.done} ifadesi bu işlevdir ve bu olay işleyicisi olarak ayarlanır. Render işlevi tamamlandıktan sonra, instance.done'u değiştirirsiniz, ancak React eski işlevi zaten aldı. Ne yapmalıyım yerine geçerli: Bu olay işleyicisi her zaman örnek (değiştirdiğiniz bir) üzerinde yöntemini çağırır emin olur

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

. Bu, React ile geleceğin uyumlu olmasının güzel yan etkisine sahiptir, çünkü örneklere tüm yöntemleri otomatik olarak vermeyi durduracaklardır.