React testing library: L'élément donné n'a pas de valeur setter lorsque fireEvent change sur le formulaire d'entrée

Question

Je veux changer la valeur de interface utilisateur matérielleTextField dans la bibliothèque de tests React. J'ai déjà configuré le data-testid. Puis en utilisant getByTestId j'ai récupéré l'élément d'entrée.

// 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]' } })

mais cela ne fonctionne pas car il renvoie une erreur: The given element does not have a value setter. N'est-ce pas que l'élément utilise e.target.value sur son attribut onChange? Qu'est-ce que je fais mal?

Answer 1

le problème ici est que lorsque nous utilisons l'interface utilisateur matérielle, elle rend le composant TextField ayant l'un des éléments à l'intérieur en tant que champ de saisie. Et seulement "input" a getter et setter dessus. Donc, après avoir obtenu le TextField, vous avez pour obtenir l'élément "input" de votre TextField en utilisant querySelector () de votre objet DOM.

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