Enzima: come accedere e impostare il valore <input>?

Sono confuso su come accedere al <input>valore durante l'utilizzo mount. Ecco cosa ho come 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 stampata undefined. Ma se modifico 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, ovviamente, la input.simulatelinea fallisce poiché sto usando renderora. Ho bisogno di entrambi per funzionare correttamente. Come lo risolvo?

MODIFICA :

Dovrei menzionare, <EditableText />non è un componente controllato. Ma quando passo defaultValuein <input />, sembra impostare il valore. Il secondo blocco di codice sopra stampa il valore e, allo stesso modo, se controllo l'elemento di input in Chrome e digito $0.valuenella console, mostra il valore previsto.

Penso che quello che vuoi è:

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

Ecco la mia fonte .

Non dovresti aver bisogno di usare render()ovunque per impostare il valore. E solo per tua informazione, stai usando due diversi render(). Quello nel tuo primo blocco di codice è da Enzyme, ed è un metodo sull'oggetto wraper mounte finddarti. Il secondo, sebbene non sia chiaro al 100%, è probabilmente quello di react-dom. Se stai usando Enzyme, usa shallowo mountcome appropriato e non ce n'è bisogno renderda react-dom.

Con Enzyme 3 , se è necessario modificare un valore di input ma non è necessario attivare la onChangefunzione, è sufficiente farlo (la nodeproprietà è stata rimossa ):

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

Puoi usare wrapper.find('input').simulate("change", { target: { value: "foo" }})per invoke onChangese hai un sostegno per quello (cioè, per i componenti controllati).

Fatto. (versione aggiornata / 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();
  });

Quindi molte opinioni diverse qui. L'unica cosa che ha funzionato per me era nessuna delle precedenti, stava usando input.props().value. Spero che aiuti.

Sto usando l'app create-react che viene fornita con jest per impostazione predefinita e l'enzima 2.7.0.

Questo ha funzionato per me:

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

Nessuno dei precedenti ha funzionato 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);

Sto usando React con TypeScript e quanto segue ha funzionato per me

wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'Hello';
wrapper.find('input').simulate('change');

Impostazione diretta del valore

wrapper.find('input').instance().value = 'Hello'` 

mi stava causando un avviso di compilazione.

Questo funziona per me usando l'enzima 2.4.1:

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

console.log(input.node.value);

ecco 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 aggiornato il mio DOM con componentname.update() E poi controllo la convalida del pulsante di invio (disabilita / abilita) con una lunghezza di 10 cifre.

Nel caso qualcuno stia lottando, ho scoperto che quanto segue funziona per me

const wrapper = mount(<NewTask {...props} />); // component under test
const textField = wrapper.find(TextField);

textField.props().onChange({ target: { value: 'New Task 2' } })
textField.simulate('change');
// wrapper.update() didn't work for me, need to find element again

console.log(wrapper.find(TextField).props()); // New Task 2

Sembra che sia necessario definire prima cosa accade nell'evento di modifica e poi simularlo (invece di simulare l'evento di modifica con i dati)

Nel mio caso stavo usando i 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. Quindi l'enzima non cambierà il valore di this._username.

Quindi ho dovuto:

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

Per poter impostare il valore, chiamare change. E poi affermare.

Questo ha funzionato per me:

let wrapped = mount(<Component />);
expect(wrapped.find("input").get(0).props.value).toEqual("something");

Ho risolto in modo molto semplice:

1. Imposta il valore da props :

  const wrapper: ShallowWrapper = shallow(<ProfileViewClass name: 'Sample Name' />);

2. Codice html :

  <input type='text' defaultValue={props.name} className='edituser-name' />

3. Accedi all'attributo da wrapper.find(element).props().attribute-name:

  it('should render user name', () => {
    expect(wrapper.find('.edituser-name').props().defaultValue).toContain(props.name);
  });

Saluti

Nessuna delle soluzioni sopra ha funzionato per me perché stavo usando Formik e avevo bisogno di contrassegnare il campo "toccato" insieme alla modifica del valore del campo. Il codice seguente ha funzionato per me.

const emailField = orderPageWrapper.find('input[name="email"]')

emailField.simulate('focus')
emailField.simulate('change', { target: { value: 'test@example.com', name: 'email' } })
emailField.simulate('blur')

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

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')

.simulate()non funziona per me in qualche modo, ho capito che funziona semplicemente accedendo a 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!