开发者社区> 问答> 正文

多个React-dnd jest测试“不能同时具有两个HTML5后端”

我有一个jest的测试文件,其中包含许多测试。

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被视为单例,并且在测试中使用,这不是我想要的。我想要独立运行的测试。

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

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

let html5Backend = null;

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

展开
收起
被纵养的懒猫 2019-10-08 16:54:53 2640 0
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();
    

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

    2019-10-08 16:56:20
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
天猫HTML5互动技术实践 立即下载
MaxCompute基于BigBench标准的最新测试进展 立即下载
用AI 高效测试移动应用 立即下载