[docs] add examples of testing with mui with react-testing-library

[Demianeen]

Related page

https://mui.com/material-ui/guides/testing/

Kind of issue

Unclear explanations

Issue description

I already spend a day trying to figure out what is a good way to write tests with mui. From docs:

For example, when rendering a TextField your test should not need to query for the specific Material UI instance of the TextField but rather for the input, or [role="textbox"].

Okay, I should query for role=textbox, but I am not sure how I would test some mui components without data-testid. For example, password and confirm password. I can't really get first input without exact specifying exact label. Should I do it? Or should I use data-testid then? I understand that mui is not about testing, but still it can save so much time for those that are developing with mui if there was at least one example for reference.

Context

I have a form with different submit schemas and it relatively big. It consists of 6 steps (sign up, email confirmation, 4 other steps for company creation specific to our business). Just sign-up step with firebase is around 300 lines of code, so I am trying to write tests for it to ensure I wouldn't break anything in the future.

For form itself we use, zod with react-hook-form + firebase for user authentication. We also use next and next-intl for internalization

Search keywords: testing mui jest vitest react-testing-library rtl @testing-library/react

[mj12albert]

Okay, I should query for role=textbox, but I am not sure how I would test some mui components without data-testid. For example, password and confirm password. I can't really get first input without exact specifying exact label. Should I do it? Or should I use data-testid then?

@Demianeen I agree that maybe our page on testing could have a bit more practical info, in the mean time I think this part of the RTL docs answers your question: https://testing-library.com/docs/queries/about#priority