Enzym - Wie kann man auf den <input> -Wert zugreifen und ihn einstellen?

Ich bin verwirrt darüber, wie ich <input>bei der Verwendung auf Werte zugreifen soll mount. Folgendes habe ich als 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();
  });

Die Konsole wird ausgedruckt undefined. Aber wenn ich den Code leicht ändere, funktioniert es:

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

Außer natürlich, dass die input.simulateLeitung ausfällt, da ich sie renderjetzt benutze . Ich brauche beides, um richtig zu arbeiten. Wie behebe ich das?

EDIT :

Ich sollte erwähnen, <EditableText />ist keine kontrollierte Komponente. Aber wenn ich gehe defaultValuein <input />, so scheint es , um den Wert einzustellen. Der zweite Codeblock oben druckt den Wert aus. Wenn ich das Eingabeelement in Chrome überprüfe und $0.valuedie Konsole eingebe, wird der erwartete Wert angezeigt.

Ich denke, was Sie wollen, ist:

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

Hier ist meine Quelle .

Sie sollten render()nirgendwo etwas verwenden müssen, um den Wert festzulegen. Und nur zu Ihrer Information, Sie verwenden zwei verschiedene render(). Der in Ihrem ersten Codeblock stammt von Enzyme und ist eine Methode für das Wraper-Objekt mountund findgibt Ihnen. Der zweite, obwohl nicht 100% klar, ist wahrscheinlich der von react-dom. Wenn Sie Enzyme verwenden, verwenden Sie einfach shallowoder mountnach Bedarf, und es besteht keine Notwendigkeit für renderfrom react-dom.

Wenn Sie mit Enzym 3 einen Eingabewert ändern müssen, aber die onChangeFunktion nicht auslösen müssen, können Sie dies einfach tun ( nodeEigenschaft wurde entfernt ):

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

Sie können verwenden, wrapper.find('input').simulate("change", { target: { value: "foo" }})um aufzurufen, onChangewenn Sie eine Requisite dafür haben (dh für gesteuerte Komponenten).

Ich habs. (aktualisierte / verbesserte Version)

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

Also viele verschiedene Meinungen hier. Das einzige, was für mich funktionierte, war keines der oben genannten, es wurde verwendet input.props().value. Ich hoffe das hilft.

Ich benutze die Create-React-App, die standardmäßig mit Scherz und Enzym 2.7.0 geliefert wird.

Das hat bei mir funktioniert:

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

Keines der oben genannten hat bei mir funktioniert. Dies hat bei Enzyme ^ 3.1.1 für mich funktioniert:

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

Hier ist der Rest des Codes für den Kontext:

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

Ich verwende Reagieren mit TypeScript und das Folgende hat für mich funktioniert

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

Wert direkt einstellen

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

verursachte mir eine Kompilierungswarnung.

Dies funktioniert bei mir mit Enzym 2.4.1:

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

console.log(input.node.value);

Hier ist mein Code ..

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)

Ich habe mein DOM mit aktualisiert componentname.update() und dann die Überprüfung der Senden-Schaltfläche (Deaktivieren / Aktivieren) mit einer Länge von 10 Stellen überprüft.

In meinem Fall habe ich ref Rückrufe verwendet,

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

Um den Wert zu erhalten. Das Enzym ändert also nicht den Wert von this._username.

Also musste ich:

login.node._username.value = "[email protected]";
    user.simulate('change');
    expect(login.state('mailValid')).toBe(true);

Um den Wert einstellen zu können, rufen Sie change auf. Und dann behaupten.

Das hat bei mir funktioniert:

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

Für den Fall, dass jemand Probleme hat, habe ich Folgendes für mich gefunden

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

Es scheint, dass Sie zuerst definieren müssen, was im Änderungsereignis passiert, und es dann simulieren müssen (anstatt das Änderungsereignis mit Daten zu simulieren).

Ich habe auf sehr einfache Weise gelöst:

1. Stellen Sie den Wert von Requisiten ein :

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

2. HTML-Code :

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

3. Besuchen Sie das Attribut aus wrapper.find(element).props().attribute-name:

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

Prost

Ich verwende die setValue- Methode von Wrapper [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] , um den Wert festzulegen .

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

.simulate()funktioniert bei mir irgendwie nicht, ich habe es geschafft, nur auf das zuzugreifen, node.valueohne anrufen zu müssen .simulate(); in deinem Fall:

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

Hoffe das hilft für andere!