Cypress testing of Storybook

storybook_spec.js

describe('Storybook', () => {
    beforeEach(() => {
        cy.visit('http://airbnb.io/react-dates/')
    })
    
    context('DateRangePicker', () => {
        it('should visit the default story in this collection', () => {
            cy.get('a[data-name="default"]').click()

            // Get the iframe for the components and make assertions on that.
            cy.get('#storybook-preview-iframe').then(($iframe) => {
                const doc = $iframe.contents();
                iget(doc, "#startDate").click();
                iget(doc, "#root > div > div:nth-child(2) > div > a").should('have.text', "Show Info");
            })
        })
    })

    context("DayPicker", () => {
        beforeEach(() => {
            cy.get('div[data-name="DayPicker"]').click();
        })
        it('should visit the vertical day picker', () => {
            cy.get('a[data-name="vertical"]').click();

            // Get the iframe for the components and make assertions on that.
            cy.get('#storybook-preview-iframe').then(($iframe) => {
                const doc = $iframe.contents();
                // This is an implicit assertion that this element exists
                iget(doc, 'div[aria-label="Calendar"]');
            })
        })
    })
})

// Helper func to access Storybook "showcase" iframe
function iget(doc, selector) {
    return cy.wrap(doc.find(selector));
}