Enzym - Wie Zugriff und Einstellung Wert?

Question

Ich bin verwirrt darüber, wie auf <input> Wert zugreifen, wenn Sie mount verwenden. Hier ist, was ich als meine Test bekam:

it('cancels changes when user presses esc', done => { 
    const wrapper = mount(<EditableText defaultValue="Hello" />); 
    const input = wrapper.find('input'); 

    console.log(input.render().attr('value')); 
    input.simulate('focus'); 
    done(); 
    }); 

Die Konsole druckt undefined. Aber wenn ich etwas ändern Sie den Code, es funktioniert:

it('cancels changes when user presses esc', done => { 
    const wrapper = render(<EditableText defaultValue="Hello" />); 
    const input = wrapper.find('input'); 

    console.log(input.val()); 
    input.simulate('focus'); 
    done(); 
    }); 

Außer natürlich, die input.simulate Linie versagt, da ich render bin jetzt mit. Ich muss beide richtig arbeiten. Wie behebe ich das?

EDIT:

Ich sollte erwähnen, <EditableText /> ist nicht eine kontrollierte Komponente. Aber wenn ich defaultValue in <input /> passiere, scheint es, den Wert einzustellen. Der zweite Codeblock oben druckt den Wert aus, und wenn ich das Eingabeelement in Chrome inspiziere und in der Konsole $0.value gebe, zeigt es den erwarteten Wert an.

Answer 1

Verstanden. (Aktualisiert/verbesserte Version)

it('cancels changes when user presses esc', done => { 
    const wrapper = mount(<EditableText defaultValue="Hello" />); 
    const input = wrapper.find('input'); 

    input.simulate('focus'); 
    input.simulate('change', { target: { value: 'Changed' } }); 
    input.simulate('keyDown', { 
     which: 27, 
     target: { 
     blur() { 
      // Needed since <EditableText /> calls target.blur() 
      input.simulate('blur'); 
     }, 
     }, 
    }); 
    expect(input.get(0).value).to.equal('Hello'); 

    done(); 
    }); 

Answer 2

Ich denke, was Sie wollen, ist:

input.simulate('change', { target: { value: 'Hello' } }) 

Here's my source.

Sie sollten render() nirgends verwenden, um den Wert festzulegen. Und nur zur Info, Sie verwenden zwei verschiedene render(). Die in Ihrem ersten Codeblock ist von Enzyme, und ist eine Methode auf dem Wrapper-Objekt mount und find geben Sie. Der zweite, obwohl es nicht 100% klar ist, ist wahrscheinlich der von react-dom. Wenn Sie Enzyme verwenden, verwenden Sie einfach shallow oder mount und render von react-dom.

Answer 3

In meinem Fall i ref Rückrufe wurde mit,

<input id="usuario" className="form-control" placeholder="Usuario" 
                 name="usuario" type="usuario" 
                 onKeyUp={this._validateMail.bind(this)} 
                 onChange={()=> this._validateMail()} 
                 ref={(val) =>{ this._username = val}} 
                > 

den Wert zu erhalten. Also Enzym wird den Wert von this._username nicht ändern.

Also musste ich:

login.node._username.value = "mario@com.com"; 
    user.simulate('change'); 
    expect(login.state('mailValid')).toBe(true); 

Lage sein, den Wert setzen dann ändern aufrufen. Und dann behaupten.

Answer 4

Dies funktioniert für mich Enzym 2.4.1:

const wrapper = mount(<EditableText defaultValue="Hello" />); 
const input = wrapper.find('input'); 

console.log(input.node.value); 

Answer 5

Das ist für mich gearbeitet. Ich benutze create-react-app, das standardmäßig mit jest und Enzym 2.7.0 geliefert wird.

`

const wrapper = mount(<EditableText defaultValue="Hello" />); 
const input = wrapper.find('input')[index]; // where index is the position of the input field of interest 
input.node.value = 'Change'; 
input.simulate('change', input); 
done() 

`

Answer 6

Mit Enzym 3, wenn Sie benötigen einen Eingangswert zu ändern, aber nicht die onChange Funktion schießen müssen Sie ihn nur tun können (node Eigenschaft has been removed):

wrapper.find('input').instance().value = "foo";

Sie können wrapper.find('input').simulate("change", { target: { value: "foo" }}) verwenden, um onChange aufzurufen, wenn Sie eine Stütze dafür haben (dh für kontrollierte Komponenten).

Answer 7

So viele verschiedene Meinungen hier. Das einzige, was für mich funktionierte, war keines der oben genannten, es war input.props().value. Ich hoffe das hilft.

Answer 8

Keiner der oben genannten funktionierte für mich. Dies ist, was für mich am Enzym gearbeitet^3.1.1:

input.instance().props.onChange(({ target: { value: '19:00' } })); 

Hier ist der Rest des Codes für Kontext ist:

const fakeHandleChangeValues = jest.fn(); 
    const fakeErrors = { 
    errors: [{ 
     timePeriod: opHoursData[0].timePeriod, 
     values: [{ 
     errorIndex: 2, 
     errorTime: '19:00', 
     }], 
    }], 
    state: true, 
    }; 
const wrapper = mount(<AccessibleUI 
    handleChangeValues={fakeHandleChangeValues} 
    opHoursData={opHoursData} 
    translations={translationsForRendering} 
    />); 
const input = wrapper.find('#input-2').at(0); 
input.instance().props.onChange(({ target: { value: '19:00' } })); 
expect(wrapper.state().error).toEqual(fakeErrors);