Реакция приставной формы - ошибка при тестировании - «TypeError: handleSubmit не является функцией» - PullRequest
Новая
       37

Реакция приставной формы - ошибка при тестировании - «TypeError: handleSubmit не является функцией»

0 голосов
/ 27 ноября 2018

Я изо всех сил пытаюсь найти решение при тестировании компонента в форме редукса.Проблема в том, что только когда я проверяю, просто ли компонент выполняет рендеринг, он выдает мне ошибку: «TypeError: handleSubmit не является функцией», но приложение работает нормально, как и ожидалось.

Я пытался решить эту проблему, просто чтобы handleSubmit стал функцией, а не извлекать ее из реквизита, но тогда приложение не работает.Когда форма отправки верна, она должна перейти на / целевую страницу, но вместо этого просто повторно отрендерить компонент входа.

Компонент: 

import React, { Component } from 'react'
//import { Link } from 'react-router-dom'
import { Field, reduxForm } from 'redux-form'
import '../../style/style.css'

export class Login extends Component {

    renderField(field) {

        const { meta: { touched, error} } = field;
        const className = `form-group ${touched && error ? 'has-danger' : ''}`; 

        return (
            <div className={className}>
                
                <input className="form-control" id="username_field" placeholder={field.label} type="text" {...field.input} />
                
                <div className="text-help"> 
                    { field.meta.touched ? field.meta.error : '' }
                </div>
            </div>
        )
    }

    renderPasswordField(field) {

        const { meta: { touched, error} } = field;
        const className = `form-group ${touched && error ? 'has-danger' : ''}`; 

        return (
            <div className={className}>
                
                <input className="form-control" id="password_field" placeholder={field.label} type="password" {...field.input} />
                
                <div className="text-help"> 
                { field.meta.touched ? field.meta.error : '' }
                </div>
            </div>
        )
    }

    onSubmit(values) {
       
        this.props.history.push('/landing')

    }

    // DOESN'T WORK!!! 
    //  handleSubmit(formValues){
    //   //console.log(formValues);
    // }



    render() {

        const { handleSubmit } = this.props

        return (

            <div>
                <div className="login-form">
                    <form onSubmit={ /*this.*/handleSubmit(this.onSubmit.bind(this))}>

                        <h2 className="text-center">TQI Log in</h2>
                        <div className="form-group">

                            <Field id="username" name="username" label="username" component={this.renderField} />
                        </div>
                        <div className="form-group">
                            <Field id="password" name="password" label="password" component={this.renderPasswordField} />

                        </div>
                        <div className="form-group">
                            
                            <button id="login_button" type="submit" className="btn btn-primary btn-block">Login </button>

                        </div>
                    </form>
                </div>
            </div>
        );
    }
}

function validate(values) {
    const errors = {}

    const dummyData = {
        username: 'admin',
        password: '123'
    }

    // Validate the inputs from values 
    if(!values.username) {
        errors.username = "Enter a username"
    } else if(values.username !== dummyData.username){
        errors.username = "Wrong username"
    }

    if(!values.password) {
        errors.password = "Enter a password"
    } else if( values.username === dummyData.username && values.password !== dummyData.password){
        errors.password = "Wrong password"
    }

    // if errors is empty, the form is fine to submit
    // If errors has *any* properties, redux forms assumes form is invalid
    return errors
}

export default reduxForm({
    validate,
    form: 'LoginForm'
})(Login)

Файл тестирования: 

import React from 'react'
import { shallow } from 'enzyme'
import { Login } from './login'


describe('<Login />', () => {

	it('render the <Login /> component without crashing', () => {
		const wrapper = shallow(<Login />)
		expect(wrapper.length).toEqual(1)
	})

	// it('navigate to /landing page when the form is submit correctly', () => {
		
	// })

 })

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

вам нужно пройти onSubmit при инициализации: 

export default reduxForm({
    validate,
    form: 'LoginForm',
    onSubmit: this.onSubmit // here
})(Login)

или в реквизите: 

<Component>
    <Login onSubmit={this.onSubmit}/>
</Component>
0 голосов
/ 27 ноября 2018

Вы используете функцию поддержки вашего HOC reduxForm в вашем методе рендеринга.Но в тестовом файле вы импортируете компонент без HOC поверх него, что означает, что prop / function недоступна.Вы должны предоставить Login фиктивную handleSubmit функцию поддержки.

Попробуйте: 

import React from 'react'
import { shallow } from 'enzyme'
import { Login } from './login'

describe('<Login />', () => {
    it('render the <Login /> component without crashing', () => {
        const wrapper = shallow(<Login handleSubmit={() => {}}  />)
        expect(wrapper.length).toEqual(1)
    })
 })
...