Question

在测试Redux形式的组件时，我正在努力寻找解决方案。问题在于，仅当我简单地测试组件是否正在渲染时，它才会给我一个错误：“ TypeError：handleSubmit不是函数”，但该应用程序可以正常运行。

我试图解决该问题，只是使handleSubmit成为一个函数，而不是从props中获取它，但是该应用程序无法正常工作。提交表单正确时，它必须导航到/着陆页，而只是重新呈现登录组件。

组件：

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', () => {
		
	// })

 })

Answer 1

您正在使用HOC reduxForm中的render函数的prop函数。但是，在测试文件上，您要导入的组件上没有HOC，这意味着prop /功能不可用。您必须为Login提供模拟handleSubmit prop函数。

尝试：

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)
    })
 })

Answer 2

您需要在初始化时通过onSubmit：

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

或道具：

<Component>
    <Login onSubmit={this.onSubmit}/>
</Component>

Answer 3

首先导出redux-form修饰类

    export const DecoratedLogin = reduxForm({
      validate,
      form: 'LoginForm'
    })(Login);

然后用它代替普通的类。

import { DecoratedLogin } from './login'

你应该可以从 redux-form 访问 props。

React redux-form-测试时出错-“ TypeError：handleSubmit不是函数”

3 个答案: