Reactjs 单元测试React Web应用程序的根组件

如何测试通过react dom render函数呈现的根组件

我正在处理这个组件

 export default class EWAWeb extends React.Component {
    render() {
        return (
            <Provider store={store} >
                <Router>
                    <Switch>
                        <Route exact path="/" component={SplashScreen} />
                        <Route path="/start" component={SplashScreen} />
                        <Route path="/dashboard" component={Dashboard} />
                    </Switch>
                </Router>
            </Provider>
        );
    }
}

render(<EWAWeb />, document.getElementById('app'));

导出默认类EWAWeb.Component{
render（）{
返回(
);
}
}
render（，document.getElementById（'app'））；

内部笑话

describe('To test the Login Component functionality.', () => {
    configure({ adapter: new Adapter() });
    let compEWAWebParent = null;

    it(`should mount and check.`, () => {
            compEWAWebParent = mount(<EWAWeb />);
            const isReduxProvider = compEWAWebParent.find(Provider);
            expect(isReduxProvider).toHaveLength(1);
        });
});

descripe（'测试登录组件功能'，（）=>{
配置（{adapter:newadapter（）}）；
让compewarent=null；
它（`应该安装并检查。`，（）=>{
compewarent=mount（）；
const isReduxProvider=compewawebaprent.find（提供者）；
expect（isReduxProvider）.toHaveLength（1）；
});
});

我写这个简单的测试来检查。 如果我删除下面的行，测试工作正常

render(<EWAWeb />, document.getElementById('app'));

render（，document.getElementById（'app'）；

否则抛出错误：

不变冲突：目标容器不是DOM元素

我不想隔离文件，也不想使用document.body

多谢各位

问题解决了，我已经实现了100%的代码覆盖率

多谢各位

解决方案

export default class EWAWeb extends React.Component {
    render() {
        return (
            <Provider store={store} >
                <Router>
                    <Switch>
                        <Route exact path="/" component={SplashScreen} />
                        <Route path="/start" component={SplashScreen} />
                        <Route path="/dashboard" component={Dashboard} />
                    </Switch>
                </Router>
            </Provider>
        );
    }
}

const containerDiv = document.getElementById('app');
render(<EWAWeb />, containerDiv || document.createElement('DIV'));

导出默认类EWAWeb.Component{
render（）{
返回(
);
}
}
const containerDiv=document.getElementById（'app'）；
render（，containerDiv | | document.createElement（'DIV'））；

这里有几个简单的方法供您考虑：

将

路由器

组件及其子组件放入它们自己的组件中，您可以轻松彻底地对其进行单元测试，而根本不需要对挖空的

EWAWeb

组件进行单元测试。（自动验收测试将包括检查

EWAWeb

组件所代表的基本React布线。）

仅在

文档时调用
render

const appElement=document.getElementById（'app'）；
appElement&渲染（，appElement）；