Question

如何测试通过react-dom渲染函数渲染的根组件？

我正在研究这个反应组件。

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

JEST内部

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

我正在编写这个简单的测试来检查。如果我删除以下行，测试运行良好，

render(<EWAWeb />, 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'));

Answer 1

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

将Router组件及其子组件放入自己的组件中，您可以轻松彻底地进行单元测试，而不是对所得到的挖空EWAWeb组件进行单元测试。（自动验收测试将涵盖检查EWAWeb组件所代表的基本React布线。）
仅在render返回有效对象时致电document.getElementById，以便在单元测试时不会出现错误：

const appElement = document.getElementById('app'); appElement && render(<EWAWeb />, appElement);

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

1 个答案: