检查React组件是否通过单元测试渲染

时间:2019-07-03 11:51:04

标签: javascript reactjs unit-testing jestjs enzyme

首先,很抱歉获得非常通用的标题。我昨天开始学习写作测试,所以我什至不知道这里出了什么问题。 这是React渲染代码:

    render () {
        const formElementsArray = [];
        for ( let key in this.state.controls ) {
            formElementsArray.push( {
                id: key,
                config: this.state.controls[key]
            } );
        }

        let form = formElementsArray.map( formElement => (
            <Input
                key={formElement.id}
                elementType={formElement.config.elementType}
                elementConfig={formElement.config.elementConfig}
                value={formElement.config.value}
                invalid={!formElement.config.valid}
                shouldValidate={formElement.config.validation}
                touched={formElement.config.touched}
                changed={( event ) => this.inputChangedHandler( event, formElement.id )} />
        ) );

        if ( this.props.loading ) {
            form = <Spinner />
        }

        let errorMessage = null;

        if ( this.props.error ) {
            errorMessage = (
                <p>{this.props.error.message}</p>
            );
        }

        let authRedirect = null;
        if ( this.props.isAuthenticated ) {
            authRedirect = <Redirect to={this.props.authRedirectPath} />
        }

        return (
            <div className={classes.Auth}>
                {authRedirect}
                {errorMessage}
                <form onSubmit={this.submitHandler}>
                    {form}
                    <Button btnType="Success">SUBMIT</Button>
                </form>
                <Button
                    clicked={this.switchAuthModeHandler}
                    btnType="Danger">SWITCH TO {this.state.isSignup ? 'SIGNIN' : 'SIGNUP'}</Button>
            </div>
        );
    }

这是我的测试代码:

    import {Auth} from "./Auth";
    import React from 'react';
    import {configure, shallow} from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    import Button from '../../components/UI/Button/Button';

    configure({adapter: new Adapter()});
    describe('<Auth/>', function () {
        let wrapper;
        beforeEach(() => {
            wrapper = shallow(<Auth onSetAuthRedirectPath={()=>{}}/>)
        });
        it('should render <Auth/>', () => {
            expect(wrapper.find(<Button/>)).toHaveLength(1);
        })
    });

有几个问题。

  1. 编辑:我意识到这没有任何意义。我只想测试按钮是否正在渲染。

  2. 您还要在这里测试什么?

0 个答案:

没有答案