Cypress Quick Tip: Fixtures

Having worked for agencies, studios, consultancies for years one thing that I've managed to live through time and time again is being on a greenfield app project that depended on a API/backend that was also in flight this has caused more instability, turmoil and budget waste than most other client service gotchyas I've encountered.

Integration level stubbing or end-to-end mocking. You can use Cypress to do this. And in a lot of cases you should be doing this anyway to reduce test flakiness but that's aside from the real point. The MAGIC. Ready for it? Well, here go.

You know the instantaneous live reloading you get while working on React or Vue apps? You make a change in your browser and all of the sudden you can see the page youre working on have the changes you just made? It's magic, right? Well, couple that with auto-save in your text editor. It gets EVEN QUICKER. Your feedback loop is extremely tight. Ok. Well, now instead of running your app in a browser with live re-loading, you are running your browser via Cypress using the test runner. You write a test and you make a change and it triggers a re-run. OK, now we have tests and visual feedback. Now you up the ante and stub our your test suite using fixtures. You're adding data and endpoints and integrations LIVE and seeing your tests run and break and fixing them. You're getting visual feedback and it's all damn near instant. It is SO COOL.

You don't need to do all that to leverage fixtures in Cypress but you can and it's worth thinking about.

References:

• https://docs.cypress.io/examples/examples/recipes.html#Bootstrapping-your-App
• https://docs.cypress.io/api/commands/fixture.html#Syntax

Example:

cy.server()
cy.route('GET', '/api/???', 'fixture:testdata')
  .as('load')
cy.visit('/')
cy.wait('@load')
cy.get('foo')
  .should('have.thing', 0)