web-dev-qa-db-ja.com

酵素-<input>値にアクセスして設定する方法

mountを使用するときに<input>値にアクセスする方法について混乱しています。私のテストとして得たものは次のとおりです。

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

もちろん、renderを使用しているため、input.simulate行は失敗します。両方とも適切に動作する必要があります。どうすれば修正できますか？

編集：

<EditableText />は制御されたコンポーネントではありません。しかし、defaultValueを<input />に渡すと、値が設定されているようです。上記の2番目のコードブロックは値を出力します。同様に、Chromeの入力要素を調べ、コンソールで$0.valueと入力すると、期待される値が表示されます。

unit-testingreactjsenzyme
61
ffxsam

とった。 （更新/改善されたバージョン）

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

私はあなたが欲しいと思う：

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

これが私のソースです 。

値を設定するためにrender()を使用する必要はないはずです。また、参考までに、2つの異なるrender()を使用しています。最初のコードブロックの1つはEnzymeのものであり、mountおよびfindを提供するラッパーオブジェクトのメソッドです。 2番目のものは、100％明確ではありませんが、おそらくreact-domからのものです。 Enzymeを使用している場合は、必要に応じてshallowまたはmountを使用するだけで、react-domからのrenderは不要です。

61
Tyler Collier

Enzyme 3を使用すると、入力値を変更する必要があるがonChange関数を起動する必要がない場合は、これを実行できます（nodeプロパティ- 削除されました ）：

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

wrapper.find('input').simulate("change", { target: { value: "foo" }})を使用して、onChangeのプロップ（つまり、制御されたコンポーネント）があれば呼び出します。

29
bjudson

ここでさまざまな意見があります。私のために働いた唯一のものは上記のどれでもなかった、それはinput.props().valueを使用していた。それがお役に立てば幸いです。

8
Y2H

デフォルトでjestと酵素2.7.0が付属するcreate-react-appを使用しています。

これは私のために働いた：

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
erika_dike

上記のどれも私にとってはうまくいきませんでした。これが酵素^ 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);
2
user9048395

ここに私のコードがあります。

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)

componentname.update()でDOMを更新し、10桁の長さで送信ボタンの検証（無効化/有効化）を確認しました。

1
Anupam Maurya

これは、酵素2.4.1を使用して機能します。

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

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

WrapperのsetValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value] メソッドを使用して値を設定します。

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

私の場合、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 = "[email protected]";
    user.simulate('change');
    expect(login.state('mailValid')).toBe(true);

値を設定できるようにするには、changeを呼び出します。そしてアサートします。

0
cabaji99

これは私のために働いた：

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

.simulate()はどういうわけか機能しません。.simulate()を呼び出さなくてもnode.valueにアクセスするだけで機能します。あなたの場合：

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

これが他の人に役立つことを願っています！

0
Jee Mok