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

但是后续的总是会出现此错误：

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

我猜这是因为HTMLBackend被视为单例，并且在测试中使用，这不是我想要的。我想要独立运行的测试。

是否有一些在beforeEach（）函数中创建HTMLBackend实例的方法。

我试图将HTML5Backend封装为一个单例，但是我遇到了同样的问题：

let html5Backend = null;

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

Answer 1

我通过在“描述”级别引用 HTMLBackend 实例解决了这个问题，如下所示：

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();

这相当于在所有测试中都有一个单例。