Проверка отображения компонента React с помощью модульного тестирования - PullRequest
0 голосов
/ 03 июля 2019

Прежде всего, простите за очень общее название.Я начал учиться писать тесты вчера, поэтому я даже не знаю, что здесь не так.Вот код рендеринга 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. Что еще вы можете проверить здесь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...