[解決済み] Enzyme - How to access and set <input> value?
2022-05-16 15:32:12
Question
I'm confused about how to access
<input>
value when using
mount
. Here's what I've got as my 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();
});
The console prints out
undefined
. But if I slightly modify the code, it works:
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();
});
Except, of course, the
input.simulate
line fails since I'm using
render
now. I need both to work properly. How do I fix this?
EDIT :
言っておきますが
<EditableText />
は制御されたコンポーネントではありません。しかし、私が
defaultValue
を
<input />
と入力すると、値が設定されるようです。上記の2番目のコードブロックは値を出力します。同様に、Chromeで入力要素を調べて、次のように入力します。
$0.value
と入力すると、期待通りの値が表示されます。
どのように解決するのですか?
できました。(更新/改良版)
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();
});
関連
-
[解決済み] レンダリング後に入力フィールドにフォーカスを設定するには?
-
[解決済み] クエリ文字列からパラメータ値を取得する方法は?
-
[解決済み] Gradleを使用して1つのユニットテストクラスのみを実行する方法
-
[解決済み] プライベートメソッドをテストすべきか、パブリックメソッドのみをテストすべきか?[クローズド]
-
[解決済み】ユニットテストと機能テストの違いは何ですか?
-
[解決済み】Arduinoのコードをユニットテストするにはどうしたらいいですか?
-
[解決済み】ユニットテスト初心者、優れたテストを書くには?[クローズド]
-
[解決済み] GUIをユニットテストするにはどうしたらいいですか?
-
[解決済み] "エラー。Karma-Jasmineのユニットテストケースを書いているときに「No provider for router」というエラーが発生しました。
-
[解決済み] ユニットテストとは、どのようなもので、どのように行うのですか?[重複あり]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Assert.Fail()はバッドプラクティスとみなされるか?
-
[解決済み] jest.fn()の機能と使い方を教えてください。
-
[解決済み] フェイク、モッキング、スタビングの違いとは?
-
[解決済み] ユニットテストの命名のベストプラクティス [終了しました]。
-
[解決済み】mochaのテスト用ディレクトリを指定するには?
-
[解決済み】Unit Testsの一般的な命名規則にはどのようなものがありますか?[クローズド]。
-
[解決済み] 抽象クラスのテスト
-
[解決済み] ユニットテストとは、どのようなもので、どのように行うのですか?[重複あり]
-
[解決済み] Go言語でのテストに適したパッケージの命名法
-
[解決済み] TDDとBDDの主な違いは何ですか?[クローズド]