How to correctly test the behavior of a component?

Question

Software testing

Hello everyone

Everyone has been testing React components through Enzyme for a long time, and there are different approaches to testing the behavior of a component depending on external conditions and user behavior.

I need to check that the component contains a button that opens a window when it is clicked.
It turns out that you need to look for the button, click on it, and check the behavior (actions, new markup, whatever).

So here's how to search for a button (?):
1. Search for a tag (button) with the desired button text
2. Search for the button component (if you make it a separate component), and check for the presence of the component, and, in fact, write window opening tests for that the button component itself, i.e. do not mix everything together
3. Search for any element in the button text

Options #1 and #3 lead to test brittleness and imposing implementation (changed the text or tag, and the test is broken, although the component works correctly)

Option #2 leads to the fact that the presence of the component in the component is tested, and not the actual behavior of the component itself. This is a real non-brittle test, but the tests become inseparable, i.e. without writing tests for the child component, the current sense tests will not show the actual behavior of the component.

How to bypass both restrictions and implement the test without delving into the implementation of the component?

While I’m waiting for the answer “no way”, I’ve already seen (for a long time) that people write that the link to the markup of the component at least 1 level cannot be bypassed in this case, but still?)