DndProvider: Cannot have two HTML5 backends at the same time

Describe the bug DndProvider backend is not tore down when un-mounting. Although this surfaced in our test, I would think this would also apply to an app.

Reproduction

If you run the test in this CodeSandbox, you should one them fail with the “Cannot have two HTML5 backends at the same time” error. The same test runs twice (using test.each), the first time it passes but second time it fails.

In our actual application, we do use a single DndProvider at the root, hence we don’t run into this issue. However, the errors crops up in our tests, as each tests renders a DndProvider (with an HTML5Backend).

Expected behavior I would expect the backend to be tore down (teardown) between each tests, when the components get unmounted and cleaned up.

Desktop (please complete the following information):

• OS: MacOS 11.2.2
• Browser: Jest/jsdom
• Versions:
  • react-dnd: 13.1.1
  • react-dnd-html5-backend: 12.1.1

Additional context I tried the suggestion from https://github.com/react-dnd/react-dnd/issues/2884#issuecomment-735981457 thinking that teardown didn’t occur because a reference to the drop ref was still alive, but it didn’t fix the error.

We looked into using the test backend in our tests, but it does not work with fireEvent.dragEnter and al - seems like you need to use the public method from the backend (ie.: simulateBeginDrag and …).

[avigoldman]

This was the fix that worked for me!

[kodedninja]

Had the same issue for a long time and couldn’t find any fix other than the workaround of manually handling the manager. You can use createDropManager from dnd-core and initialize a single manager that you reuse in the DndProvider. Don’t ask me if this is something you should do, but it works. So, something like:

// dnd-utils.js
import { createDropManager } from 'dnd-core'

export const manager = createDragDropManager(HTML5Backend)

...

// somewhere.js
import { manager } from './dnd-utils'

<DndProvider manager={manager}>
  ...
</DndProvider>