Enzyme - Come accedere e impostare <input> valore?

voti
28

Sono confuso su come accedere <input>valore quando si utilizza mount. Ecco quello che ho come il mio test:

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

La console viene stampato undefined. Ma se modificare leggermente il codice, funziona:

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

Tranne, naturalmente, la input.simulatelinea non riesce dal momento che sto usando renderora. Ho bisogno di entrambi per funzionare correttamente. Come posso risolvere questo problema?

EDIT :

Devo dire, <EditableText />non è un componente controllato. Ma quando passo defaultValuein <input />, sembra per impostare il valore. Il secondo blocco di codice non sopra stampare il valore, e allo stesso modo se ispezionare l'elemento di input in Chrome e digitare $0.valuenella console, mostra il valore atteso.

È pubblicato 13/05/2016 alle 21:43
fonte dall'utente
In altre lingue...                            


11 risposte

voti
28

Penso che quello che vuoi è:

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

Ecco la mia fonte .

Non dovrebbe essere necessario utilizzare render()ovunque per impostare il valore. E proprio FYI, si utilizzano due diversi render()s. L'uno in primo blocco di codice è da enzimi, ed è un metodo sull'oggetto wraper mounte finddati. Il secondo, anche se non è chiaro al 100%, è probabilmente quella da react-dom. Se stai usando Enzyme, basta usare shallowo mount, se del caso e non c'è bisogno di renderda react-dom.

Risposto il 26/05/2016 a 05:08
fonte dall'utente

voti
15

Fatto. (Aggiornato / versione migliorata)

  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();
  });
Risposto il 13/05/2016 a 23:51
fonte dall'utente

voti
13

Con Enzyme 3 , se è necessario modificare un valore di ingresso, ma non c'è bisogno di sparare la onChangefunzione è possibile solo fare questo ( nodeproprietà è stata rimossa ):

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

È possibile utilizzare wrapper.find('input').simulate("change", { target: { value: "foo" }})per richiamare onChangese si dispone di un puntello per questo (ad esempio, per i componenti controllati).

Risposto il 06/10/2017 a 17:35
fonte dall'utente

voti
3

Questo ha funzionato per me. Sto usando create-reagiscono-app che viene fornito con scherzo di default e l'enzima 2.7.0.

`

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

`

Risposto il 15/01/2017 a 09:13
fonte dall'utente

voti
1

Nessuno dei precedenti ha lavorato per me. Questo è ciò che ha funzionato per me su Enzyme ^ 3.1.1:

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

Ecco il resto del codice per il contesto:

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);
Risposto il 19/12/2017 a 00:11
fonte dall'utente

voti
1

Questo funziona per me usando enzima 2.4.1:

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

console.log(input.node.value);
Risposto il 25/10/2016 a 13:29
fonte dall'utente

voti
0

qui è il mio codice ..

const input = MobileNumberComponent.find('input')
// when
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

Ho aggiornare il mio DOM con componentname.update() E poi controllando presentare convalida pulsante (disabilitare / abilitare) con lunghezza di 10 cifre.

Risposto il 02/01/2019 a 06:35
fonte dall'utente

voti
0

.simulate()non funziona per me in qualche modo, ho ottenuto che funziona con un solo accesso al node.valuesenza bisogno di chiamare .simulate(); nel tuo caso:

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

// Get the value
console.log(input.node.value); // Hello

// Set the value
input.node.value = 'new value';

// Get the value
console.log(input.node.value); // new value

Spero che questo aiuti per gli altri!

Risposto il 31/10/2018 a 02:49
fonte dall'utente

voti
0

Io uso di Wrapper setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] metodo per impostare il valore.

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')
Risposto il 26/06/2018 a 11:14
fonte dall'utente

voti
0

Così un sacco di opinioni diverse qui. L'unica cosa che ha funzionato per me è stato nessuno dei precedenti, che stava usando input.props().value. Spero che aiuti.

Risposto il 16/11/2017 a 12:14
fonte dall'utente

voti
0

Nel mio caso mi è stato utilizzando callback ref,

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

Per ottenere il valore. Così enzima non cambierà il valore di this._username.

Così ho dovuto:

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

Per essere in grado di impostare il valore quindi chiamare il cambiamento. E poi valere.

Risposto il 17/10/2016 a 23:16
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more