Question

我对单元测试React很新，而不是一般的单元测试，我有几个问题。

我有一个代表用户可以进行身份验证的页面的组件。现在，我确实想测试这个组件，但我不确定我应该测试哪些功能以及我不测试哪些功能。

例如，我的组件有一些内部状态，其中包含当前输入的用户名，密码，用户名字段的错误，用户名字段的密码，...

是否应该对状态进行一般测试，还是应该使用酶中的find来测试UI。例如，当我更新包含用户名的字段时，更新的用户名将存储在状态中，并且要验证的按钮将被激活。

那么，当我在输入字段中输入一个值时，我应该测试一下状态是否已更新，或者我是否应该通过在提交按钮上为一个类进行chechking来测试DOM是否已更新？

此外，该组件使用反应路由器中有Link个组件，这使得测试变得困难。

因此，我正在使用以下HOC来渲染组件并传入路由器存根。

export const stubRouterContext = (Component, props) => {
    function RouterStub() { }

    Object.assign(RouterStub, {
        makePath() {},
        makeHref() {},
        transitionTo() {},
        replaceWith() {},
        goBack() {},
        getCurrentPath() {},
        getCurrentRoutes() {},
        getCurrentPathname() {},
        getCurrentParams() {},
        getCurrentQuery() {},
        isActive() {},
        getRouteAtDepth() {},
        setRouteComponentAtDepth() {}
    });

    /**
     * Defines the component which contains stubbed router.
     *
     * @class RouterContextComponent
     * @extends {React.Component}
     */
    class RouterContextComponent extends React.Component {

        /**
         * Gets the child context of the component.
         *
         * @returns
         *
         * @memberof RouterContextComponent
         */
        getChildContext() {
            return {
                router: RouterStub,
                routeDepth: 0
            };
        }

        /**
        * Returns the HTML that represent the component.
        *
        * @memberof RouterContextComponent
        */
        render() {
            return <Component {...props} />
        }
    }

    /**
     * Defines the child context types of the component.
     */
    RouterContextComponent.childContextTypes = {
        router: React.PropTypes.func,
        routeDepth: React.PropTypes.number
    };

    // Return the component that contains a stubbed router.
    return RouterContextComponent;
};

现在，我确实进行了单元测试，但我不确定要测试什么。

let wrappedComponent = stubRouterContext(LoginPageComponent, {
    startBackgroundOperation: () => {},
    stopBackgroundOperation: () => {}
});

// Act.
const wrapper = mount(
    <wrappedComponent />
);

非常感谢任何指导。

如何对依赖于React Router的组件进行单元测试？

0 个答案: