Test file snapshot renders a new baseid for each run

[macdonmc]

Hi there,

I'm using Paste Tabs in an application and am getting an error in my testing (btw the application is built with a combination of paste components and react classes). I'm running into an error where when I run my jest tests, the match snapshot test won't pass because the state baseid is continuously being updated each time the test runs. Is this potentially a paste issue?

[SiTaggart]

Hi @macdonmc

Yes, this is somewhat unfortunate, but intended behaviour. To ensure our components stay accessible, it requires us to rely quite heavily on IDrefs in HTML. The problem with that is IDs have to be unique them to work correctly. Because we can't guarantee how many or what components are in any given page, to prevent ID clashes we have to rely on unique ID generation.

What that can mean though is you do get indeterminate IDs for tests environments, especially if you are adding tests to a test suite over time.

For that reason, we don't actually recommend snapshotting component markup in tests, we don't even do it ourselves and are slowly replacing any remaining DOM snapshots with much more intentional tests that assert the result we are actually looking for.

So for example, for an alert dialog component, rather than snapshot the markup, we assert explicitly the requirements we have on the DOM using React Testing LIbrary. https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx#L34

It should also be noted that, the internals of a component are likely to change over time as we add or change features and designs. Which is likely to make your test suite pretty flappy if you're using snapshot tests to validate DOM structure.

Hope that helps.

[macdonmc]

Thank you for the response! Very helpful