Множественные тесты React-dnd jest "Не может быть двух бэкэндов в HTML5 одновременно"

Question

У меня есть файл jest test с несколькими тестами.

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

Первый тест всегда работает

Но последующие всегда приводят к этой ошибке:

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

Я предполагаю, что это потому, что HTMLBackend обрабатывается как одноэлементный и используется во всех тестах, а это не то, что мне нужно.Я хочу, чтобы тесты выполнялись независимо.

Были ли какие-либо случаи создания экземпляра HTMLBackend в функции beforeEach () .

Я пытался инкапсулировать 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();

Это эквивалентно наличию одиночного элемента во всех тестах.