"Write tests, not too many, mostly integration."
Our approach is to favor high-quality tests that use the app like the user would, and avoid testing implementation details.
Thus, we are favoring integration-style tests that run in a real browser. We're using Cypress to run these tests.
These kinds of tests tend to be be slower, which is a good incentive to not write too many.
Notes:
- I try to choose selectors based on recommendations in the Cypress docs and Testing library docs. Specifically, I:
- Favor id selectors, or targeting an element by it's label or textContent.
- If neither of those will work I place
data-testidattribute in the component code.- I don't put
data-testidin the static initial page load, because my tests usually want the interactive component that loads later, and Cypress will wait for thedata-testids to appear before proceeding. - Note: it's ok to have multiple identical
data-testids on the same page, unlike htmlids.
- I don't put
- Avoid using class selectors. Those are for styling.