Enzyme - Como acessar e definir o valor de <input>?

Estou confuso sobre como acessar o <input>valor ao usar mount. Aqui está o que tenho como meu teste:

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

O console imprime undefined. Mas se eu modificar um pouco o código, ele funciona:

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

Exceto, é claro, a input.simulatelinha falha, já que estou usando renderagora. Eu preciso de ambos para funcionar corretamente. Como faço para corrigir isso?

EDITAR :

Devo mencionar, <EditableText />não é um componente controlado. Mas quando passo defaultValuepara <input />, parece definir o valor. O segundo bloco de código acima imprime o valor e, da mesma forma, se eu inspecionar o elemento de entrada no Chrome e digitar $0.valueno console, ele mostra o valor esperado.

Acho que o que você quer é:

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

Aqui está minha fonte .

Você não deve precisar usar render()nenhum lugar para definir o valor. E apenas para sua informação, você está usando dois diferentes render(). Aquele em seu primeiro bloco de código é da Enzyme e é um método no objeto wraper mounte finddá a você. O segundo, embora não seja 100% claro, é provavelmente o de react-dom. Se você estiver usando Enzyme, apenas use shallowou mountconforme apropriado e não há necessidade renderde react-dom.

Com a Enzima 3 , se você precisa alterar um valor de entrada, mas não precisa disparar a onChangefunção, você pode apenas fazer isso (a nodepropriedade foi removida ):

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

Você pode usar wrapper.find('input').simulate("change", { target: { value: "foo" }})para invocar onChangese tiver um prop para isso (ou seja, para componentes controlados).

Entendi. (versão atualizada / melhorada)

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

Então, muitas opiniões diferentes aqui. A única coisa que funcionou para mim foi nenhuma das opções acima, estava usando input.props().value. Espero que ajude.

Estou usando o aplicativo criar-reagir, que vem com o jest por padrão e a enzima 2.7.0.

Isso funcionou para mim:

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

Nenhuma das opções acima funcionou para mim. Isso é o que funcionou para mim no Enzyme ^ 3.1.1:

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

Aqui está o resto do código para contexto:

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

Estou usando o react com TypeScript e o seguinte funcionou para mim

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

Definir o valor diretamente

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

estava me causando um aviso de compilação.

Isso funciona para mim usando a enzima 2.4.1:

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

console.log(input.node.value);

aqui está meu código ..

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)

Eu atualizei meu DOM com componentname.update() E, em seguida, verifiquei a validação do botão de envio (desativar / ativar) com comprimento de 10 dígitos.

No caso de alguém estar com dificuldades, descobri que o seguinte funciona para mim

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

Parece que você precisa definir o que acontece no evento de mudança primeiro e, em seguida, simulá-lo (em vez de simular o evento de mudança com dados)

No meu caso, eu estava usando callbacks 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}}
                                                    >

Para obter o valor. Portanto, a enzima não mudará o valor de this._username.

Então eu tive que:

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

Para poder definir o valor, chame a mudança. E então afirme.

Isso funcionou para mim:

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

Resolvi de uma forma muito simples:

1. Defina o valor dos adereços :

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

2. Código Html :

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

3. Acesse o atributo de wrapper.find(element).props().attribute-name:

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

Felicidades

Nenhuma das soluções acima funcionou para mim porque eu estava usando o Formik e precisava marcar o campo como "tocado" junto com a alteração do valor do campo. O código a seguir funcionou para mim.

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

emailField.simulate('focus')
emailField.simulate('change', { target: { value: '[email protected]', name: 'email' } })
emailField.simulate('blur')

Eu uso o método setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] do Wrapper para definir o valor.

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

.simulate()não funciona para mim de alguma forma, consegui funcionar apenas acessando o node.valuesem precisar ligar .simulate(); no seu caso:

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

Espero que ajude outras pessoas!