フォームの入力フィールドをテストしようとしています。ただし、
Enzyme.js
を使用する場合
simulate
へ入力フィールドの変更、
state
ログから
simulate
関数は
undefined
という名前の状態で新しいレコードを作成しました
助けてくれて本当にうれしいです。
よろしく
コンポーネントの初期状態は次のようになります。
this.state = {
submission: {
firstName: '',
lastName: '',
email: '',
date: new Date(),
validation: {
email : {isInvalid: false, message: ""},
firstName : {isInvalid: false, message: ""},
isValid : true,
lastName : {isInvalid: false, message: ""}
}
}
}
これはテスト機能です:
it('should respond to change event and change the state of the Component', () =>{
const wrapper = shallow(<ApplicationForm/>);
console.log(wrapper.find('#firstName').debug());
wrapper.find('#firstName').simulate(
'change', {
target: {
name: 'firstName',
value: 'John'
}
}
)
expect(wrapper.state().submission.firstName).to.equal('John');
})
これは私が状態になることを期待するものです:
submission: {
firstName: 'John',
...
}
そして、これは結果を
debug
で検査したときに得られるものです
submission: {
firstName: '',
lastName: '',
email: '',
date: new Date(),
validation: {
email : {isInvalid: false, message: ""},
firstName : {isInvalid: false, message: ""},
isValid : true,
lastName : {isInvalid: false, message: ""}
},
undefined: 'John'
}
以下に、レンダリングされたフォームのコードを示します。
<input type="text"
id="firstName"
className="form-control form-control-sm"
placeholder="First name"
onChange={this.updateSubmission.bind(this)}
/>
updateSubmission関数は次のようになります。
updateSubmission(event) {
let updatedSubmission = Object.assign({}, this.state.submission);
updatedSubmission[event.target.id] = event.target.value;
this.setState({
submission: updatedSubmission
});
}
回答 1 件
関連記事
- マテリアルUIで状態が変化したときに、スイッチラベルをどのように変更しますか?
- 状態Reactのオブジェクトの配列の変数を変更します
- DataTablesは入力画像の変更をフィルタリングします
- 変数が配列の場合にvuexの状態を変更する方法
- メイン入力フォームが(onchange)の場合、jQueryは他の値を変更します
- React Nativeで1つの関数コンポーネントの状態を別の関数コンポーネントから変更するにはどうすればよいですか?
- SwiftUIのサブビューで特定の状態変化のアニメーション化を無効にするにはどうすればよいですか?
- JavaScriptでユーザー入力値(プロンプト)のフォントの色を変更するにはどうすればよいですか?
- Recatは、状態が0の場合に変更を検出する方法をフックします
- 空の場合は入力背景色を変更します
ザ・
updateSubmission
ハンドラーはtarget.id
を使用します :しかし、テストでは
name
を使用します :テスト
target
の修正id: 'firstName'
を使用するオブジェクト それを修正する必要があります。 (または、name
の使用に切り替えることができます あなたのコードで。)