Getting a random hash for FocusRing in snaphots

[dermyhughes]

🐛 Bug Report

I am using the FocusRing component to wrap around a button like so:

import { FocusRing } from '@react-aria/focus';

<FocusRing focusRingClass={`foo`}>
      <button
        {...props}
      >
        {children}
      </button>
    </FocusRing>

But recently our Jest snapshots tests have been rendering these with a random hashed string rather than the element name.

🤔 Expected Behavior

Previously these tests rendered the component name, just like the DOM:

<FocusRing focusRingClass=\\"foo\\" >
    // Button element
</FocusRing>

😯 Current Behavior

<$dfd8c70b928eb1b3$export$1a38b4ad7f578e1d
  focusRingClass=\\"foo\\" >
    // Button element
</$dfd8c70b928eb1b3$export$1a38b4ad7f578e1d>

Is this expected or has something changed?

[reidbarber]

Did this start happening after updating React Spectrum to a specific version? Or updating Jest or React? I don't think there have been any recent changes to FocusRing.

[snowystinger]

Looks related to the Parcel upgrade, might be linked to this issue as well #2881

I might try upgrading your Jest as Reid suggested. Or checking on your Jest config. Can you share more about those?

[dermyhughes]

I noticed this crop up around the same time as #2857
I tried bumping Jest but getting the same result.

I locked to "@react-aria/focus": "3.4.0" and the tests are snapping as expected:

<FocusRing
               focusRingClass=\\"foo\\"
              >

So it seems to be an issue with more recent versions of the focus ring (or a dependency).

[devongovett]

I don't think you should be relying on the names of internal functions for your tests. These can change at any time. For example we might choose to refactor something. As long as the exported name that you import in your code is the same, it's not a breaking change.

Not sure what to tell you about snapshot tests. We don't recommend them for exactly this reason: they are far too brittle and you may find yourself making trivial changes like this often.

[snowystinger]

Another option you have is to Mock the components out of our library, then your snapshotting would actually be testing your code and wouldn't be dependent on ours.
https://medium.com/@melounek/jest-snapshots-with-nested-components-c08ceef34108

[LFDanLu]

Closing for now. @dermyhughes feel free to let us know if the mock approach described above doesn't work.

[dermyhughes]

More a comment than anything, but I've noticed you get the hash on Reacts stacktrace too - not very friendly when debugging.
For example:

React.Children.only expected to receive a single React element child.
Error: React.Children.only expected to receive a single React element child.
    at Object.onlyChild [as only] (http://localhost:6006/vendors~main.iframe.bundle.js:140147:13)
    at $907718708eab68af$export$1a38b4ad7f578e1d (http://localhost:6006/vendors~main.iframe.bundle.js:155202:71)
    at renderWithHooks (http://localhost:6006/vendors~main.iframe.bundle.js:125165:18)
    ```

[AndyOGo]

Same here.

@devongovett
@snowystinger
Hashing exports this way is an anti-pattern.
It obfuscates the stack trace, snapshots, enverything that relies on displayName.

[devongovett]

parcel-bundler/parcel#6092