web-dev-qa-db-fra.com

Comment puis-je trouver et cliquer sur un bouton sans texte en utilisant React Library?

Beaucoup réact de la bibliothèque de test Exemples Montrez comment trouver et cliquer sur un bouton à l'aide de la requête getByText, comme dans:

fireEvent.click(getByText("Create"))

OR

userEvent.click(getByText("Create"))

Cependant, il est commun d'avoir des boutons sans texte et que des icônes SVG uniquement, telles que les UI de matériau boutons d'icônes ou boutons d'action flottante . Existe-t-il un moyen recommandé d'interroger et de cliquer sur les boutons comme ceux-ci? Pour le contexte, j'utilise les événements de niveau supérieur fournis par la bibliothèque de compagnie tilisateur-événement .

reactjsmaterial-uireact-testing-library
5
Roman Scher

Il existe plusieurs façons de faire appel à un élément, sans voir votre hiérarchie d'éléments, il est difficile de dire. Mais, il existe plusieurs façons d'interroger un élément, une alternative à l'utilisation de getByText() pourrait être getByRole('button'). Si vous souhaitez ajouter un data-testid À l'élément que vous pouvez utiliser getByTestId(). Il y a des requêtes plus disponibles ici: https://testing-library.com/docs/dom-testing-library/api-quisseries

2
Alex K

Pour les boutons d'icônes, ajoutez un attribut aria-label comme ci-dessous:

<button aria-label='edit'>
  <edit-icon />
</button>

Ensuite, dans votre test, passez le nom accessible lorsque vous appelez getByRole()

screen.getByRole('button', {
  name: /edit/i
})

Du Docs :

Le nom accessible est pour des cas simples égaux à par exemple. Le label d'un élément form _ ou le contenu texte d'une button ou la valeur de l'attribut aria-label.

1
NearHuscarl

Il y a un tas de différentes façons de le faire, y compris les retombées préférées de chacun, data-tested. Mais si vous utilisez UI du matériel, vous recherchez peut-être le moyen le plus "mui" de le faire. Deux idées:

  • La Documentation MUI Affiche tous ses boutons enveloppés avec un élément label avec une propriété htmlFor. Vous pouvez le faire puis utiliser getByLabelText()
  • Vos boutons d'icônes ont probablement (et devraient!) Une info-bulle et le texte de l'info-bulle provient probablement d'une propriété title. Ensuite, vous pouvez obtenir le bouton avec getByTitle().
0
Alesh Houdek