Энзим-как получить доступ и установить значение?

Я смущен тем, как получить доступ <input> значение при использовании mount. Вот что я получил в качестве теста:

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

консоль выводит undefined. Но если я немного изменю код, он будет работать:

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

кроме, конечно,input.simulate строка не работает, так как я использую render сейчас. Мне нужно, чтобы оба работали как следует. Как это исправить?

редактировать:

Я должен упомянуть, <EditableText /> не является контролируемым компонентом. Но когда я пройду defaultValue на <input />, кажется, установить значение. Второй блок кода выше распечатывает значение, а также, если я проверяю входной элемент в Chrome и набираю .value в консоли отображается ожидаемое значение.

36
enzyme reactjs unit-testing

9 ответов

Я думаю, что вы хотите:

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

вот мой источник.

вам не нужно использовать render() anywhere, чтобы установить значение. И просто FYI, вы используете два разных render() ' s. Один в вашем первом блоке кода от Enzyme и является методом на объекте wraper mount и find дам тебе. Второй, хотя он не на 100% ясен, вероятно, является одним из react-dom. Если вы используете энзим, то как раз используйте shallow или mount as соответствующий и нет необходимости render С react-dom.

35

получил его. (обновленная/улучшенная версия)

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

С фермент 3, если вам нужно изменить входное значение, но не нужно запускать

16

Я использую create-react-app, который поставляется с шуткой по умолчанию и ферментом 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();
3

так много разных мнений здесь. Единственное, что сработало для меня, не было ничего из вышеперечисленного, это использование input.props().value. Надеюсь, это поможет.

2

это работает для меня, используя фермент 2.4.1:

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

console.log(input.node.value);
1

ничего из вышеперечисленного не сработало для меня. Это то, что сработало для меня на Энзиме ^3.1.1:

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

вот остальная часть кода для контекста:

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

в моем случае я использовал обратные вызовы 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}}
                                                    >

для получения значения. Так что энзим не изменит значения этого._имя пользователя.

0

Я использую setValue обертки[https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] метод для установки значения.

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