Should be wrapped in act(...) about headlessui-float HOT 5 CLOSED

Hi @razzeee, please provide a minimal reproducible example (like github repo, codesandbox, stackblitz...), it is recommended to fork the Headless UI Flaot's Online Demo to reproduce.

from headlessui-float.

FYI, we currently have to add act (or waitFor in our case) around every component render, that headlessui-float is used in.

it('renders positive', async () => {
    render(<HoursPillRelative hours={-9} />)

    await waitFor(() => expect(screen.getByText('+9h')).toBeInTheDocument())
  })

That's our workaround for now. If it can be done in the library, it would spare quiet some work. I'll look into creating a repro asap.

from headlessui-float.

I found it quiet hard to work it into the online demo, as there is no testing integrated at all. Creating a new redwoodjs app might just be easier for me.

from headlessui-float.

Yes, I think may not need to use the online demo. I just need a minimal reproducible example.

I can only do my best to help you with the act() error, but I can't guarantee that I can solve it. The main reason is that I usually use Vue, not React, and I'm not very familiar with React.

However, I can give you a reference code: Headless UI Float's unit test. I also encountered this problem many times when writing unit tests, but I still couldn't understand why this error occurred. This test is driven by Vitest. I hope it can help you build a minimal example and solve this problem.

from headlessui-float.

I found that this issue can only be solved by using await waitFor(), because I also wrote the unit test in the package in the same way:

However, I created a util function based on the usage of Floating UI, which can help your code look more concise:

I hope this can help you.

However, I think this issue cannot be solved in the package, so I will close this issue for now. If you have a better solution, please send a PR.

from headlessui-float.