Unwanted test dependency with RAC Table

[henkkasoft]

I am not sure if this is a bug in RAC but I found a dependency that a test is dependent of another test.

I was able to reproduce this and created a public github repo for it:
https://github.com/henkkasoft/ractestdependency/blob/main/src/components/Table.test.tsx
So the first test is passing but the second is failing.

But if the first test's last 3 lines are uncommented the second test pass also.

This repo use RAC nightly build, so it is not official and with 1.6.0 this does not reproduce but I started to dig this because weird freezing test problems after testing RAC virtualizer and colspan.

Either I do something wrong or then there might be some async problem in RAC?
The idea was to get the test to fail because the freezing problems were even harder to reproduce / understand. So I am not sure if this failing problem here is the same as the freezing problem I originally started to investigate but this is at least some reproducible issue.

Any ideas?

[snowystinger]

Thanks for the issue, unfortunately, I cannot get your test repo running the tests at all. I just ran

npm I
npm test

and got that the role=button could not be found.

Can you either check that the repo runs or include more information about how the second test fails?

[henkkasoft]

I updated package.json with forced versions of dependencies and remake package-lock.json.
Can you try again?

I have node version 22.14.0 and npm version 11.1.0
I cloned the repo and after npm install and npm test the output for me is:

 ❯ src/components/Table.test.tsx (2 tests | 1 failed) 202ms
   ✓ table 1
   × starts to fail if above 3 lines are commented 105ms
     → Unable to find an accessible element with the role "row"
...
 ❯ src/components/Table.test.tsx:37:31
     35|   fireEvent.keyDown(document, { key: 'Tab', code: 'Tab' });
     36| 
     37|   const rowElements2 = screen.getAllByRole('row');
       |                               ^
     38|   columnheaders = within(rowElements2[0]).getAllByRole('columnheader');
     39|   expect(columnheaders).toHaveLength(2);

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  11:37:59
   Duration  6.19s (transform 56ms, setup 1.07s, collect 1.05s, tests 202ms, environment 3.31s, prepare 214ms)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

And after uncommenting lines 14, 15 and 16 in first test in Table.test.tsx the second text failed previously is passed also.

 ✓ src/components/Table.test.tsx (2 tests) 190ms
   ✓ table 1
   ✓ starts to fail if above 3 lines are commented

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  11:40:26
   Duration  1.94s

 PASS  Waiting for file changes...
       press h to show help, press q to quit

[snowystinger]

This is very odd, and maybe I just don't know enough about the testing environment in question, but I completely got rid of the first test and pared down the Table implementation to get rid of all state, everything I could. It still fails. And it appears to be because the MenuTrigger renders open, which shouldn't be happening. I even tried using isOpen={false} on the MenuTrigger.

If I get more time, I'll try to look into it more, but hopefully this will spark something.

[henkkasoft]

Thanks for the fast response.

I added one more test to repo to show another strange behavior
https://github.com/henkkasoft/ractestdependency/blob/main/src/components/ComboBox.test.tsx

I also added except to check that the cleanup clear the document tree like this in setupTests.tsx:

afterEach(async () => {
  cleanup();
  vi.clearAllMocks();
  expect(document.body.innerHTML).toBe('');
});

But the new test fails here because the document.body.innerHTML after cleanup is like this:
div data-live-announcer="true" style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"><div role="log" aria-live="assertive" aria-relevant="additions"><div>4 options available.</div></div><div role="log" aria-live="polite" aria-relevant="additions"></div></div>

This might not be related at all to this original problem but this kind of behavior is something that might create some strange dependencies between tests if the cleanup between tests is not working. So there might be some async problems maybe?

[snowystinger]

There is a liveannouncer, which you may need to wait for that to finish or clear them after tests. That's expected, though not well documented. They would clean themselves up eventually, but you may not want to wait for that if you aren't using fake timers.

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/live-announcer/src/LiveAnnouncer.tsx#L66

If you call that in your afterEach, it should take care of the dom remaining.

If you're using fake timers, just run them all to completion after each test.