Enzim - <input> değerine nasıl erişilir ve ayarlanır?

<input>Kullanırken değere nasıl erişeceğim konusunda kafam karıştı mount. İşte testim olarak sahip olduğum şey:

  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 çıktı undefined. Ancak kodu biraz değiştirirsem, işe yarıyor:

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

Tabii ki şu anda input.simulatekullandığım için hat başarısız oluyor render. Her ikisinin de düzgün çalışması için ihtiyacım var. Bunu nasıl düzeltirim?

DÜZENLE :

<EditableText />Kontrollü bir bileşen olmadığını belirtmeliyim . Ama defaultValueiçeri girdiğimde <input />, değeri belirliyor gibi görünüyor. Yukarıdaki ikinci kod bloğu değeri yazdırıyor ve aynı şekilde Chrome'daki giriş öğesini inceleyip $0.valuekonsola yazarsam beklenen değeri gösteriyor.

Sanırım senin istediğin:

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

İşte kaynağım .

render()Değeri ayarlamak için herhangi bir yeri kullanmanız gerekmemelidir . Bilginize, iki farklı render()'s kullanıyorsunuz. İlk kod bloğunuzdaki Enzyme'dendir mountve wraper nesnesindeki bir yöntemdir ve findsize verir. İkincisi,% 100 net olmasa da, muhtemelen kaynaktır react-dom. Eğer Enzim kullanıyorsanız, sadece kullanmak shallowveya mountuygun olarak ve gerek yoktur renderden react-dom.

İle Enzim 3 bir giriş değerini değiştirmek gerekir ancak bunu yaparsanız, ateş gerekmez onChangesadece (bunu yapabilirsiniz fonksiyonu nodeözelliği kaldırıldı ):

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

Bunun wrapper.find('input').simulate("change", { target: { value: "foo" }})için bir desteğiniz onChangevarsa (yani, kontrollü bileşenler için) çağırmak için kullanabilirsiniz .

Anladım. (güncellenmiş / geliştirilmiş versiyon)

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

Burada pek çok farklı görüş var. Benim için işe yarayan tek şey yukarıdakilerin hiçbiri değildi, kullanıyordu input.props().value. Umarım bu yardımcı olur.

Varsayılan olarak jest ve enzim 2.7.0 ile gelen create-react-app kullanıyorum.

Bu benim için çalıştı:

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

Yukarıdakilerin hiçbiri benim için işe yaramadı. Enzyme ^ 3.1.1'de benim için işe yarayan buydu:

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

İşte bağlam için kodun geri kalanı:

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

TypeScript ile react kullanıyorum ve aşağıdakiler benim için çalıştı

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

Değeri doğrudan ayarlama

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

bana bir derleme uyarısına neden oluyordu.

Bu, 2.4.1 enzimini kullanarak benim için çalışıyor:

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

console.log(input.node.value);

işte kodum ..

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)

DOM'umu componentname.update() ve ardından 10 basamak uzunluğunda gönder düğmesi doğrulamasını (devre dışı bırak / etkinleştir) ile güncelledim.

Herhangi birinin mücadele etmesi durumunda, aşağıdakileri benim için çalışırken buldum

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

İlk önce değişiklik olayında ne olacağını tanımlamanız ve ardından bunu simüle etmeniz gerekiyor gibi görünüyor (değişiklik olayını verilerle simüle etmek yerine)

Benim durumumda ref geri çağırmalarını kullanıyordum,

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

Değeri elde etmek için. Dolayısıyla enzim bu._kullanıcı adının değerini değiştirmeyecektir.

Bu yüzden yapmak zorundaydım:

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

Değeri ayarlayabilmek için değişikliği çağırın. Ve sonra ileri sürün.

Bu benim için çalıştı:

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

Çok basit bir şekilde çözdüm:

1. Değerleri sahne öğesinden ayarlayın :

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

2. Html kodu :

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

3. Özelliğe şuradan erişinwrapper.find(element).props().attribute-name :

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

Şerefe

Yukarıdaki çözümlerden hiçbiri benim için işe yaramadı çünkü Formik kullanıyordum ve alan değerini değiştirmenin yanı sıra alanı "dokundu" olarak işaretlemem gerekiyordu. Aşağıdaki kod benim için çalıştı.

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

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

Değeri ayarlamak için Wrapper'ın setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] yöntemini kullanıyorum.

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

.simulate()bir şekilde benim için çalışmıyor, node.valuearamaya gerek kalmadan sadece erişerek çalıştım .simulate(); Senin durumunda:

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

Umarım bu başkalarına yardımcı olur!