Reactテストライブラリ：入力フォームでfireEventが変更された場合、指定された要素には値セッターがありません

Question

反応テストライブラリの material UITextFieldの値を変更したい。 data-testidはすでに設定済みです。次に、getByTestIdを使用して、入力要素を取得しました。

// the component
<TextField
  data-testid="input-email"
  variant="outlined"
  margin="normal"
  required
  fullWidth
  id="email"
  label="Email Address"
  name="email"
  value={email}
  onChange={e => setEmail(e.target.value)}
  autoComplete="email"
  autoFocus
/>
// the test 
//...
let userInput = getByTestId('input-email')
fireEvent.change(userInput, { target: { value: '[email protected]' } })

エラーThe given element does not have a value setterが返されるため、これは機能しません。要素はonChange属性でe.target.valueを使用していませんか？何が悪いのでしょうか？

Answer 1

ここでの問題は、Material UIを使用すると、内部に要素の1つを持つTextFieldコンポーネントが入力フィールドとしてレンダリングされます。そして"input"だけがゲッターとセッターを持っています。したがって、TextFieldを取得すると、DOMオブジェクトのquerySelector（）を使用してTextFieldの「input」要素を取得するためが得られます。

const field = getByTestId('input-email').querySelector('input');
// now fire your event
fireEvent.change(field, { target: { value: '[email protected]' } });