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

Question

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

我正在研究这个 React 组件。

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

开玩笑

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

否则抛出错误：

Invariant Violation: Target container is not a DOM element.

我不想隔离文件，也不想使用文档 .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 接线。）
只在document.getElementById returns 一个有效的对象时调用render，这样你在单元测试的时候就不会报错：

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

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

Unit Testing the root component of the React Web Application

reactjs

jestjs

react-dom