[Bug] ignoredException instead of helpful error from testing-library

[IanVS]

Describe the bug

After starting to use @storybook/testing-library, I find that I often get an error of:

ignoredException
Error: ignoredException
    at http://localhost:6006/node_modules/.cache/vite/@storybook_testing-library.js?v=5ffe5372:15438:25

instead of the usually-helpful errors I'm used to from testing-library. For instance, I was trying to screen.getByRole('form'), and got this error. I swapped out the screen import to @testing-library/react, and I got a more usable error of

Unable to find an accessible element with the role "form"

Here are the accessible roles:

  textbox:

  Name "Name":
  <input
    aria-invalid="false"
    class="border-focusable _Input_1te95_1 width-100"
    id="Field-1"
    maxlength="50"
    name="roleName"
  />

  Name "Description":
  <input
    aria-invalid="false"
    class="border-focusable _Input_1te95_1 width-100"
    id="Field-5"
    maxlength="255"
    name="roleDescription"
  />

  --------------------------------------------------
  list:

  Name "":
  <ul
    class="_FirewallRuleList_1k8qr_1 mb-24"
  />

.
.
.

Steps to reproduce the behavior

https://github.com/IanVS/storybook-test-library-issue-8

Check it out, and run yarn then yarn storybook and the button primary story should error with a helpful message, but doesn't.

Expected behavior

I should see the same errors that I get from the normal testing-library methods.

Screenshots and/or logs

Environment

• OS: mac
• Node.js version: 16.4.0
• NPM version: 8.1.3
• Browser (if applicable): Brave
• Browser version (if applicable): [e.g. 22]
• Device (if applicable): [e.g. iPhone6]

Additional context

I'm using version 0.0.7 of this package, and 6.4.0 of storybook.

[IanVS]

I see that the error does appear in the interactions addon, now that I've gotten that working, but I think it should be shown in the preview iframe as well, in case the addon is not installed/used.

[IanVS]

Here is a repo is reproduces this issue. https://github.com/IanVS/storybook-test-library-issue-8

I found that the ignoredException is shown with the vite builder, and a silent failure occurs with the webpack builder (arguably worse?).

[shilman]

According to @ghengeveld we need to do a string comparison instead of comparing the error instances

[Anupheaus]

I am getting this error also, is there any workaround to it other than to use @testing-library/react directly please?

[IanVS]

@Anupheaus I haven't been seeing this error in the latest 7.0 alphas and latest versions of @storybook/testing-library. What versions are you using, and are you using the vite builder or webpack?

[Anupheaus]

We are using webpack and are using the following versions:

    "@storybook/addon-docs": "^6.5.3",
    "@storybook/addon-essentials": "^6.5.3",
    "@storybook/builder-webpack5": "^6.5.3",
    "@storybook/manager-webpack5": "^6.5.3",
    "@storybook/react": "^6.5.3",
    "@storybook/testing-library": "^0.0.11",

[IanVS]

I'd be curious if updating to the latest 7.0 alpha and latest version of this library would help. It's a pretty easy migration if you want to try it out. (run npx sb@next upgrade --prerelease.)

[IanVS]

@nodegin, you mentioned getting this error. Can you share what situation you're seeing it in, and what version of storybook you're using?

[nodegin]

@IanVS I get the ignoredException error only in built version of storybook, its working well under development.
After some tracing (browser console log) it seem the error is come from @storybook/jest package.

[IanVS]

@nodegin can you share a reproduction, perhaps?