Enzym - Jak získat přístup a nastavit <vstup> hodnotu?

hlasů
28

Jsem zmatená o tom, jak přistupovat k <input>hodnotě při používání mount. Tady je to, co mám jako svého testu:

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

Konzola vytiskne undefined. Ale když jsem mírně upravit kód, to funguje:

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

Až na to, samozřejmě, input.simulatelinka selže, protože já používám renderteď. Musím tak, aby fungoval správně. Jak mohu tento problém vyřešit?

EDIT :

Měl bych zmínit, <EditableText />není kontrolovaná položka. Ale když jsem se projít defaultValuedo <input />, zdá se, nastavte hodnotu. Druhý blok kódu výše se vytiskne na hodnotu, a také pokud se kontrolovat vstupní prvek Chrome a typ $0.valuev konzole, ukazuje očekávanou hodnotu.

Položena 13/05/2016 v 21:43
zdroj uživatelem
V jiných jazycích...                            


13 odpovědí

hlasů
28

Myslím, že to, co chcete, je:

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

Tady je můj zdroj .

Měli byste není nutné používat render()kdekoliv nastavit hodnotu. A právě FYI, že používáte dva různé render()očím. Ten ve svém prvním bloku kódu je z enzymu, a je metoda na objekt wraper mounta finddá vám. Druhá, i když to není 100% jasné, je pravděpodobně jedním z react-dom. Pokud používáte enzym, stačí použít shallownebo mountpodle potřeby a není třeba renderz react-dom.

Odpovězeno 26/05/2016 v 05:08
zdroj uživatelem

hlasů
15

Mám to. (Aktualizováno / vylepšená verze)

  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();
  });
Odpovězeno 13/05/2016 v 23:51
zdroj uživatelem

hlasů
13

Díky enzymu 3 , pokud potřebujete změnit vstupní hodnotu, ale nemusí vypalovat onChangefunkci můžete jen to udělat ( nodevlastnost byla odstraněna ):

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

Můžete použít wrapper.find('input').simulate("change", { target: { value: "foo" }})k vyvolání onChangepokud máte rekvizitu pro to (tedy i kontrolovaných složek).

Odpovězeno 06/10/2017 v 17:35
zdroj uživatelem

hlasů
3

Tato pracoval pro mě. Já používám vytvořit reagují-app, která přichází s žertu standardně a enzymem 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()

`

Odpovězeno 15/01/2017 v 09:13
zdroj uživatelem

hlasů
1

Žádná z výše uvedených pracoval pro mě. To je to, co pracoval pro mě na enzym ^ 3.1.1:

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

Zde je zbytek kódu kontextu:

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);
Odpovězeno 19/12/2017 v 00:11
zdroj uživatelem

hlasů
1

To funguje pro mě pomocí enzymu 2.4.1:

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

console.log(input.node.value);
Odpovězeno 25/10/2016 v 13:29
zdroj uživatelem

hlasů
0

V případě, že někdo se snaží, našel jsem následující pracovní pro mě

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

Zdá se, že je nutné definovat, co se stane v případě změny a pak simulovat (namísto simulování události change s daty)

Odpovězeno 11/09/2019 v 20:20
zdroj uživatelem

hlasů
0

Tato pracoval pro mě:

let wrapped = mount(<Component />);
expect(wrapped.find("input").get(0).props.value).toEqual("something");
Odpovězeno 03/07/2019 v 18:03
zdroj uživatelem

hlasů
0

Zde je můj kód ..

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)

Musím aktualizovat svůj DOM s componentname.update() A pak kontrole předložit potvrzení tlačítka (vypnout / zapnout) s délkou 10 číslic.

Odpovězeno 02/01/2019 v 06:35
zdroj uživatelem

hlasů
0

.simulate()nepracuje pro mě tak nějak jsem to funguje jen s přístupem do node.valueaniž by museli volat .simulate(); ve vašem případě:

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

Doufám, že to pomůže ostatním!

Odpovězeno 31/10/2018 v 02:49
zdroj uživatelem

hlasů
0

Používám WRAPPER je setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] metodu pro stanovení hodnoty.

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')
Odpovězeno 26/06/2018 v 11:14
zdroj uživatelem

hlasů
0

Takže mnoho různých názorů zde. Jediná věc, která pracovala pro mě nebyl nikdo z výše uvedeného, bylo použití input.props().value. Doufám, že to pomůže.

Odpovězeno 16/11/2017 v 12:14
zdroj uživatelem

hlasů
0

V mém případě jsem byl s použitím ref zpětná volání,

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

Pro získání hodnoty. Takže enzym nezmění hodnotu this._username.

Takže jsem musel:

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

Aby bylo možné nastavit hodnotu pak volat změnu. A pak tvrdit.

Odpovězeno 17/10/2016 v 23:16
zdroj uživatelem

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