Enzyme - les modalités d'accès et définissez <input> la valeur?

Question

Je suis confus sur la façon d'accéder <input> de la valeur lors de l'utilisation d' mount. Voici ce que j'ai comme mon 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 imprime undefined. Mais si j'ai un peu modifier le code, il fonctionne:

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

Sauf, bien sûr, l' input.simulate ligne échoue depuis que je suis à l'aide d' render maintenant. - Je besoin pour fonctionner correctement. Comment puis-je résoudre ce problème?

EDIT:

Je dois mentionner, <EditableText /> n'est pas contrôlée d'un composant. Mais quand je passe la defaultValue en <input />, il semble pour définir la valeur. Le deuxième bloc de code ci-dessus ne imprimer la valeur, et même si j'ai inspecter l'élément d'entrée en Chrome et tapez $0.value dans la console, il montre la valeur attendue.

Answer 1

Je pense que ce que vous voulez, c'est:

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

Voici ma source.

Vous ne devriez pas avoir besoin d'utiliser render() n'importe où pour définir la valeur. Et juste pour info, vous êtes à l'aide de deux render()s'. L'un dans votre premier bloc de code est à partir de l'Enzyme, et est une méthode sur la wraper objet mount et find vous donner. La seconde, si ce n'est pas 100% clair, est sans doute celle de react-dom. Si vous êtes à l'aide de l'Enzyme, il suffit d'utiliser shallow ou mount approprié, et il n'y a pas besoin d' render de react-dom.

Answer 2

Avec de l'Enzyme de 3, si vous avez besoin de changer une valeur d'entrée, mais n'avez pas besoin de feu l' onChange de la fonction, tu peux faire ça (node de la propriété a été supprimé):

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

Vous pouvez utiliser wrapper.find('input').simulate("change", { target: { value: "foo" }}) d'invoquer onChange si vous avez un accessoire pour que (c'est à dire, pour le contrôle de composants).

Answer 3

L'a obtenu. (mise à jour/version améliorée)

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

Answer 4

Donc, beaucoup d'opinions différentes ici. La seule chose qui a fonctionné pour moi n'était aucune de ce qui précède, il a été à l'aide de input.props().value. J'espère que ça aide.

Answer 5

Je suis à l'aide de create-réagir l'application qui vient avec la plaisanterie par défaut et de l'enzyme 2.7.0.

Cela a fonctionné pour moi:

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