End-to-end tests with Cypress

Author: sapeginCreated Jan 13, 2018Updated Mar 29, 2025
Labelshelp wantedtechnical debtgood first issue

Right now we only have unit test and very simple test that check bundles for JS errors in headless Chrome. But we don’t know that Styleguidist is actually usable.

Cypress seems like a good choice.

  • Setup Cypress
  • Write first test
  • Move cypress folder to test folder
  • Write more tests:
    • Open a component in isolated mode (should show 1 component), go back (show show all components again)
    • Open an example in isolated mode (should show 1 example of 1 component), go back (show show all components with all examples again)
    • Click on a component in the sidebar should scroll to this component
    • Typing in the search field in the sidebar should filter components in the table of contents (same for sections names)

Source: styleguidist/react-styleguidist