Investigate Cypress for visual testing in our React package

[joshblack]

Cypress is a tool that has been recommended to us as one that we could use to do visual testing on our components. This issue is for delivering an MVP integration with cypress with ideally one test suite (probably Accordion?) that demonstrates how we could bring this into the project.

This integration should consider the following:

• How simple is it to author tests?
• How simple is it for tests to run in CI?
  • Does running cypress dramatically increase CI time?
• How simple is it to bring in styles for our components?

[tay1orjones]

A couple stretch goal items here include

• @testing-library/cypress could help unify the syntax of jest and cypress tests
• Evaluation of cypress-real-events for better support of native events including .type(tab), space, esc for testing keyboard navigation
• Visual regression testing w/ Percy through Cypress.
• e2e testing guidance in docs/style.md

Rough draft

ComponentName-test.e2e.js

• These tests are ran with Cypress, which is a bit different in syntax and
  mental model than Jest/JSDOM tests. It's recommended to become familiar with
  the core concepts by reading the
  Cypress introduction documentation.
• Trigger Events with via cy.real\*();
• Take snapshots with Percy
  • Percy snapshots should be used sparingly (3-4 per component)
  • Percy snapshots should always be taken after an assertion that a
    element/componen should be visible. This ensures the DOM has settled and the
    element has fully loaded.