Jest Snapshot tests failing

[christian98]

We want to use Headlessui with Jest Snapshot tests. Unfortunately the tests often fail, because the order of the executed tests changes (for example when executing only one test) and therefore the auto generated ids by the useId hook are different.

As we think this has to be solvable we ask for help. Maybe we miss something? is there a way to mock the hook during tests (we can't get it to work 😅 )? Or is there another trick?

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Internally we mock the useId hook using Jest's mocks functionality.
See: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/hooks/__mocks__/use-id.ts

I wonder if you can mock functions from within a package somehow 🤔

One thing we can look into (can't promise an ETA) is creating a "test" build where this is mocked already. OR we can detect process.env.NODE_EV === 'test' or something similar.

If you can get it working with Jest mocking features that would be awesome, you can look at the implementation from the link above!

[christian98]

Hey,
thanks for your super fast reply. We actually tried several things to mock the hook. But no luck there. (Maybe these were even some stupid ideas 😄)

1. We tried mocking the module through jest.mock and jest.spyOn. But this does not work, as the hook does not get exported (i actually don't know if it would work if the hook was exported.)
2. Trying to mock the use-id.esm.js file in the packages dist folder.
3. Resetting the modules before each test.

As i'm kind of a newbie to jest and its mocking capabilities. I currently have no idea on how to mock this hook. So any help is much appreciated.

[nessor]

@RobinMalfait Is there a possibility that you export the used hook? With this we would be able to mock this hook in our tests :)

[ASpwalters]

Was there ever a resolution here? I'm running into the same problem

[patrick-mcdougle]

There might be a solve in newer versions of headless ui where React.useId is used instead of their default implementation. In that case, you should be able to mock React.useId to return a stable value.

I can't find a solve for the older version of headless ui though...