反應測試：更改輸入字段的值

Question

我無法設置輸入字段的值。我究竟做錯了什麼？ 如果需要更多信息，請告訴我。謝謝。

describe('SignUpComp',() => { 
    let signUpComp, node; 

    beforeEach(() => { 
     signUpComp = TestUtils.renderIntoDocument(<SignUp />); 
     node = ReactDOM.findDOMNode(signUpComp); 
    }); 

    // First name 
    it('it should trigger error `min chars` if input firstName is too short',() => { 
     let elements = selectElements('firstName'); 

     TestUtils.Simulate.change(elements.input, { target: { value: 'abc' } }); 
     console.log(elements.input); // I can not see the change 
     console.log(node); // I can not see the change 

     expect(elements.error.textContent).to.equal(errorMsg.tooShort('First name', 2)); 
    }); 

    function selectElements(element) { 
     let input = node.querySelector('#' + element); 
     let error = node.querySelector('#' + element + '+ p'); 

     return { input, error }; 
    } 

Answer 1

我建議你看看enzyme，它大大簡化了測試反應組件。

用酶，你可以簡單地做：

const form = mount(<MyComponent />); 
const input = form.find('input').get(0); 
input.value = 'Blah blah';