Testing ComboBox built with @react-aria/combobox

[rppld]

I’m trying to test a <ComboBox /> component built with @react-aria/combobox but I’m having trouble making assertions on the appearance of the listbox upon typing into the field, see https://codesandbox.io/s/late-fog-ketfr?file=/src/ComboBox.test.tsx

I’ve had a look at the test implementation for @react-spectrum/combobox, and tried to replicate the setup with using fake timers as well as the custom typeText() helper but to no avail.

Anyone got any pointers for me?

[snowystinger]

I think there may be some issues with codesandbox in this particular area, could you share it as a CRA or some other minimal setup in github?

[LFDanLu]

@rppld I pulled your test and setup out of the code sandbox and it worked fine for me, but couldn't get the tests in codesandbox to work even with waitFor from the testing library. Oddly enough, using screen.debug in the codesandbox test doesn't even show the combobox itself. I'm no expert in how codesandbox runs its tests, but are you particularly tied to keeping your tests in there?

[rppld]

@snowystinger @LFDanLu apologies for my superlate response. Been on vacation when I got your replies and then forgot. Anyway thanks a lot for trying this out. The tests do indeed pass for me too if I move everything into a CRA installation. Weird. We’re using CRA for a project at work and there I’m facing the same issues as in the Codesandbox above.

[snowystinger]

My best guess is that you have some duplicates of packages, codesandbox can sometimes be hit with this problem and locally it can happen as well. Troubleshooting you can do

• delete node_modules and your package/yarn lock
• npm ls @react-aria/utils and look for duplicates, or yarn list. you can try other packages as well, utils is just a good first indicator
• run something akin to yarn dedupe
• compare setups between yours and the working local CRA