Changing knob value not working as expected

[skylock]

Updated button stories to:

export const Text = () => {
  const [clicked, setClicked] = React.useState(false)
  const buttonLabel = text('text', 'Default Knob');

  return (
    <React.Fragment>
      <Button
        onClick={() => {
          action('click')('foo', 'bar')
          setClicked(true)
        }}
      >
        {buttonLabel}
      </Button>
      <div id="clicked">{clicked ? 'clicked!' : ''}</div>
    </React.Fragment>
  )
}

and created a new spec file :

// @ts-check
/// <reference path="../../cypress.d.ts" />

describe('Button', () => {
  it('should update the #knob element text to "Test"', () => {
    cy.visitStorybook()
    cy.loadStory('Button', 'Text')
    // cy.get('button'); // Uncomment this to get it working
    cy.changeKnob('text', 'Cool Button')
    cy.get('button').should('contain.text', 'Cool')
  })
})

Expected result: Button text should be updated Actual result: Button text is not updated

Workaround: If I insert a simple cy.get('button) before changing the knob, the button component will be updated as expected

[NicholasBoll]

My best guess is the cy.get introduces enough of a delay for Storybook to set up event listeners before changeKnob issues the change knob event. Perhaps loadStory should introduce such a delay to allow Storybook event listeners to be added before releasing Cypress' queue.

Would you like to try a PR with a test to make sure that fixes it?