Enzim - Bagaimana cara mengakses dan mengatur nilai <input>?

Saya bingung tentang cara mengakses <input>nilai saat menggunakan mount. Inilah yang saya dapatkan sebagai ujian saya:

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

Konsol mencetak undefined. Tetapi jika saya sedikit memodifikasi kodenya, ini berfungsi:

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

Kecuali, tentu saja, input.simulatesaluran tersebut gagal karena saya sedang menggunakan rendersekarang. Saya membutuhkan keduanya untuk bekerja dengan baik. Bagaimana cara mengatasinya?

EDIT :

Saya harus menyebutkan, <EditableText />bukan merupakan komponen yang dikendalikan. Tetapi ketika saya masuk defaultValueke <input />, tampaknya mengatur nilainya. Blok kode kedua di atas tidak mencetak nilai, dan juga jika saya memeriksa elemen input di Chrome dan mengetik $0.valuedi konsol, itu menunjukkan nilai yang diharapkan.

Saya pikir yang Anda inginkan adalah:

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

Ini sumber saya .

Anda tidak perlu menggunakan di render()mana saja untuk menyetel nilainya. Dan hanya untuk diketahui, Anda menggunakan dua yang berbeda render(). Yang ada di blok kode pertama Anda adalah dari Enzim, dan merupakan metode pada objek pembungkus mountdan findmemberi Anda. Yang kedua, meskipun tidak 100% jelas, mungkin dari react-dom. Jika Anda menggunakan Enzim, cukup gunakan shallowatau yang mountsesuai dan tidak perlu renderdari react-dom.

Dengan Enzim 3 , jika Anda perlu mengubah nilai input tetapi tidak perlu mengaktifkan onChangefungsi, Anda dapat melakukannya ( nodeproperti telah dihapus ):

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

Anda dapat menggunakan wrapper.find('input').simulate("change", { target: { value: "foo" }})untuk memanggil onChangejika Anda memiliki prop untuk itu (mis., Untuk komponen yang dikontrol).

Mengerti. (versi yang diperbarui / ditingkatkan)

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

Begitu banyak perbedaan pendapat di sini. Satu-satunya hal yang berhasil bagi saya adalah tidak satu pun di atas, itu digunakan input.props().value. Saya harap itu membantu.

Saya menggunakan create-react-app yang dilengkapi dengan lelucon secara default dan enzyme 2.7.0.

Ini berhasil untuk saya:

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

Semua hal di atas tidak berhasil untuk saya. Inilah yang berhasil untuk saya di Enzim ^ 3.1.1:

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

Berikut adalah kode lainnya untuk konteks:

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

Saya menggunakan react dengan TypeScript dan yang berikut ini berhasil untuk saya

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

Mengatur nilai secara langsung

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

menyebabkan saya peringatan kompilasi.

Ini berfungsi untuk saya menggunakan enzyme 2.4.1:

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

console.log(input.node.value);

ini kode saya ..

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)

Saya telah memperbarui DOM saya dengan componentname.update() Dan kemudian memeriksa validasi tombol kirim (nonaktifkan / aktifkan) dengan panjang 10 digit.

Dalam kasus saya, saya menggunakan 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}}
                                                    >

Untuk mendapatkan nilai. Jadi enzyme tidak akan merubah nilai this._username.

Jadi saya harus:

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

Untuk dapat mengatur nilai maka panggil ubah. Dan kemudian tegaskan.

Ini berhasil untuk saya:

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

Jika ada yang berjuang, saya menemukan yang berikut bekerja untuk saya

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

Tampaknya Anda perlu menentukan apa yang terjadi dalam peristiwa perubahan terlebih dahulu dan kemudian mensimulasikannya (alih-alih mensimulasikan peristiwa perubahan dengan data)

Saya memecahkannya dengan cara yang sangat sederhana:

1. Tetapkan nilai dari alat peraga :

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

2. Kode HTML :

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

3. Akses atribut dari wrapper.find(element).props().attribute-name:

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

Bersulang

Tidak ada solusi di atas yang berhasil untuk saya karena saya menggunakan Formik dan saya perlu menandai bidang "tersentuh" ​​bersama dengan mengubah nilai bidang. Kode berikut berhasil untuk saya.

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

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

Saya menggunakan metode setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] Wrapper untuk menetapkan nilai.

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

.simulate()tidak bekerja untuk saya entah bagaimana, saya membuatnya bekerja dengan hanya mengakses node.valuetanpa perlu menelepon .simulate(); dalam kasus Anda:

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

Semoga ini bisa membantu orang lain!