Unable to find elements when adding Interaction Tests

[brandondurham]

I’m attempting to add some simple interaction tests to some forms in Storybook. They all work for the stories that don’t use withRouter, but the stories using withRouter all seem to access #root before it gets populated with children.

This is the test thus far:

WithSuccessfulSubmit.play = async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    expect(canvas.getByLabelText('Submit')).toBeInTheDocument();
};

Running this in Storybook yields the following error:

expect(within(<div#root>).getByLabelText("Submit"))
Unable to find a label with the text of: Submit

Ignored nodes: comments, script, style
<div
  aria-hidden="true"
  id="root"
/>

My actual integration tests can find the elements using nearly identical code but Storybook cannot. It appears that #root is actually empty at the time the test is run.

[JesusTheHun]

@brandondurham have you tried to use canvas.findByLabelText('Submit') instead ?

[brandondurham]

@JesusTheHun I have, with the same result.

[JesusTheHun]

@brandondurham can you check if you still have the issue with the latest version ?

Also can you share with me your versions and a full reproduction example ? I am unable to make storybook run when I define a play function .

[JesusTheHun]

I close this, feel free to re-open if the issue is still present