Multiple React-dnd jest tests "Cannot have two HTML5 backends at the same time"

Question

I have a jest test file with a number of tests in it.

import React from 'react';
import configureStore from 'redux-mock-store';
import {Provider} from "react-redux";
import renderer from "react-test-renderer";
import HTML5Backend from "react-dnd-html5-backend";
import {DragDropContextProvider} from "react-dnd";

describe('My Component Tests', () => {
    let mockStore;
    let store;

    beforeEach(() => {
        mockStore = configureStore();
        store = mockStore(mockData);
    });

    test(' test1', () => {
        const cmpt = <Provider store={store}>
            <DragDropContextProvider backend={HTML5Backend}>
                <MyComponent state={1}/>
            </DragDropContextProvider>
        </Provider>;

        const tree = renderer.create(cmpt).toJSON();
        expect(tree).toMatchSnapshot();
    });

    test(' test2', () => {
        const cmpt = <Provider store={store}>
            <DragDropContextProvider backend={HTML5Backend}>
                <MyComponent state={2}/>
            </DragDropContextProvider>
        </Provider>;

        const tree = renderer.create(cmpt).toJSON();
        expect(tree).toMatchSnapshot();
    });
});

The first test always work

But the subsequent ones always come up with this error :

 Error: Uncaught [Error: Cannot have two HTML5 backends at the same time.]

I am guessing this is because the HTMLBackend is treated as a singleton, and is used across tests which is not what I want. I want tests which run independantly.

Is there some was of creating an instance of the HTMLBackend in the beforeEach() function.

I have tried to encapsule the HTML5Backend into a singleton, but I get the same Problem :

let html5Backend = null;

function getSingleton() {
    if (!html5Backend) {
        html5Backend = HTML5Backend;
        debugger;
    }
    return html5Backend;
}

Answer 1

I solved this by referencing HTMLBackend instance in the "describe" level, like so :

describe('My Component Tests', () => {
    let mockStore;
    let store;

    let htmlbe = HTML5Backend; //reference instance here!!!

    beforeEach(() => {
        mockStore = configureStore();
        store = mockStore(mockData);
    });

    test(' test1', () => {
        const cmpt = <Provider store={store}>
            <DragDropContextProvider backend={htmlbe }>
                <MyComponent state={1}/>
            </DragDropContextProvider>
        </Provider>;

        const tree = renderer.create(cmpt).toJSON();
        expect(tree).toMatchSnapshot();
    });

    test(' test2', () => {
        const cmpt = <Provider store={store}>
            <DragDropContextProvider backend={htmlbe }>
                <MyComponent state={2}/>
            </DragDropContextProvider>
        </Provider>;

        const tree = renderer.create(cmpt).toJSON();

This is the equivalent of having a singleton across all tests.