How can a test find a control the way a person does?
Use its role and name. A role says what a control does, such as a button. The name is what the control is called. Checking for the “Show class details” button is usually easier to understand than depending on its color or position.
Use the package for your framework, such as React Testing Library for React. Your test runner executes the check and reports the result.
What can a component check tell you?
A component is a piece of the screen. A runner can show that the expected heading or control was missing from that piece. Testing Library can work with a simulated document or in a browser depending on setup. A simulated document cannot show how the screen actually looks on a phone.
Keep the test and fictional data with the component. The core DOM library is MIT-licensed. Use a separate browser check for layout and a separate accessibility review for the full experience.
What happens if a button loses its name?
Draw a local fictional schedule with a details button. Use no account, browser or outside service.
- Name the controlWrite “Show class details” on the button and the class title where it should appear.
- Draw a version that should failRemove the name from the button. Mark the lookup as failed, even though a clickable shape remains.
- Keep the intended outcomeWrite the expected name and resulting title. No component test was run.