Javascript 单元测试：如何在react中模拟document.getElementById（）？

我想用jest测试以下代码

没有人知道如何模拟document.getElementById（）

if (document.getElementById('estateList')) {
    render(
        <Provider store={store}>
            <EstateList />
        </Provider>,
        window.document.getElementById('estateList')
    );
}


if (document.getElementById('articleList')) {
    render(
        <Provider store={store}>
            <ArticleList />
        </Provider>,
        window.document.getElementById('articleList')
    );
}

if (document.getElementById('articleDetail')) {
    render(
        <Provider store={store}>
            <ArticleDetail />
        </Provider>,
        window.document.getElementById('articleDetail')
    );
}

if（document.getElementById（'estateList'））{
渲染(
,
window.document.getElementById（'estateList'））
);
}
if（document.getElementById（'articleList'））{
渲染(
,
window.document.getElementById（'articleList'）
);
}
if（document.getElementById（'articleDetail'））{
渲染(
,
window.document.getElementById（'articleDetail'）
);
}

我想我可以把render放在一个函数中，比如：

function estateList() {
    render(
        <Provider store={store}>
            <EstateList />
        </Provider>,
        window.document.getElementById('estateList')

    );
}

函数estateList（）{
渲染(
,
window.document.getElementById（'estateList'））
);
}

然后只需测试estateList（），而不模拟document.getElementById（），但是否仍然可以模拟document.getElementById（）？

使用create mocked

getElementById

方法，并替换

document

上的方法

if (document.getElementById('estateList')) {
    render(
        <Provider store={store}>
            <EstateList />
        </Provider>,
        window.document.getElementById('estateList')
    );
}


if (document.getElementById('articleList')) {
    render(
        <Provider store={store}>
            <ArticleList />
        </Provider>,
        window.document.getElementById('articleList')
    );
}

if (document.getElementById('articleDetail')) {
    render(
        <Provider store={store}>
            <ArticleDetail />
        </Provider>,
        window.document.getElementById('articleDetail')
    );
}

例如

index.tsx

：

从“React”导入React；
从'react redux'导入{Provider}；
从'react dom'导入{render}；
从“redux”导入{createStore}；
export const store=createStore（（）=>0）；
export const EstateList=（）=>EstateList；
导出常量ArticleList=（）=>ArticleList；
导出constarticledetail=（）=>ArticleDetail；
函数bootstrap（）{
if（document.getElementById（'estateList'））{
渲染(
,
window.document.getElementById（'estateList'），
);
}
if（document.getElementById（'articleList'））{
渲染(
您可以尝试（如果可能的话）使用
ref
.IE，
{this.element=element；}}}/>
，而不是使用
document.getElementById（）
，然后您可以替换
document.getElementById（）的出现
改为使用
此.element
，您的测试也应该可以正常运行。看看。它使创建包装器和探索包装器变得非常容易。