Comment tester la valeur d'entrée dans la dom-testing-library ou la react-testing-library ?

Les tests unitaires sont devenus une partie aussi importante du développement que la création du code de l'application en lui-même. De nombreux frameworks et librairies ont été créés afin de permettre aux développeurs de rédiger des tests automatiques pour leurs applications, logiciels ou sites internet. Parmi ces librairies, la librairie "dom-testing-library" utilise le langage JavaScript pour tester le comportement de votre site internet grâce à des tests que vous rédigez. Cette librairie, très utilisée, a eu des déclinaisons adaptées au framework utilisé pour créer votre site ou application. La librairie "react-testing-library" permet de tester ces composants développés avec React. Pour tester la valeur d'une entrée d'un formulaire, il existe plusieurs solutions.

Si vous remplissez automatiquement une balise "input", vous n'aurez pas de méthodes pour tester directement sa valeur. Une solution possible consiste à appeler la méthode "gestByDisplayValue()". Elle prend en paramètre le texte et vérifie s'il se trouve sur l'écran. Si le texte est présent dans la balise "input", utilisez cette méthode conjointement avec la méthode "toBeInTheDocument()" afin de vérifier que le texte est bien présent.

expect(screen.getByDisplayValue('valeur_a_tester')).toBeInTheDocument();

Si vous avez ce texte dans plusieurs éléments, vous devez vérifier que c'est bien la bonne balise qui contient ce texte. Pour cela, la méthode dépend des librairies que vous avez installées. Commencez par attribuer un identifiant à votre "input". Si vous utilisez directement "react-testing-library", la méthode "toBe" permet de vérifier que l'élément que vous testez a bien cet attribut.

expect(screen.getByDisplayValue('test')).toBe('identifiant-recherche');

Si vous utilisez "jest-dom", une librairie qui ajoute des méthodes de tests supplémentaires, vous pouvez appeler la méthode "toHaveAttribute()" pour tester le contenu de l'attribut "id".

expect(screen.getByDisplayValue('test')).toHaveAttribute('id', 'identifiant-recherche ');

Une autre solution est possible si vous utilisez un label avec l'attribut "for" qui est lié à votre "input". La méthode "getByRole" peut alors être utilisée pour récupérer directement la balise "input" en fonction de son identifiant. Utilisez ensuite la méthode "toHaveValue()" si vous avez installé la librairie "jest-dom", sinon la méthode "toBe()".

# Avec jest-dom
expect(screen.getByRole('input', { name: 'identifiant-input' })).toHaveValue('valeurCherchee');
# Sans jest-dom
expect(screen.getByRole('input', { name: 'identifiant-input' }).value).toBe('valeurCherchee');

JavaScript