118

<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 />上記の 2 番目のコード ブロックは値を出力します。同様に、Chrome で入力要素を調べて$0.valueコンソールに入力すると、期待値が表示されます。

4

16 に答える 16

116

I think what you want is:

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

Here's my source.

You shouldn't need to use render() anywhere to set the value. And just FYI, you are using two different render()'s. The one in your first code block is from Enzyme, and is a method on the wraper object mount and find give you. The second one, though it's not 100% clear, is probably the one from react-dom. If you're using Enzyme, just use shallow or mount as appropriate and there's no need for render from react-dom.

于 2016-05-26T05:08:21.033 に答える
3

上記のどれも私にとってはうまくいきませんでした。これは、Enzyme ^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);
于 2017-12-19T00:11:26.023 に答える
2

これは、酵素 2.4.1 を使用して動作します。

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

console.log(input.node.value);
于 2016-10-25T13:29:42.503 に答える
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}}
                                                    >

値を取得します。したがって、酵素は this._username の値を変更しません。

だから私はしなければならなかった：

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

値を設定できるようにするには、 change を呼び出します。そして、断言します。

于 2016-10-17T23:16:38.100 に答える