React redux-form - 測試時出錯 - “TypeError: handleSubmit is not a function”

Question

在測試 redux-form 組件時，我正在努力尋找解決方案。 問題是，只有當我簡單地測試組件是否正在呈現時，它才會給我一個錯誤：“TypeError：handleSubmit 不是函數”，但應用程序運行正常，正如預期的那樣。

我試圖解決它只是為了使 handleSubmit 成為一個函數而不是從道具中獲取它，但是該應用程序不起作用。 當提交表單正確時，它必須導航到 /landing 頁面，而只是重新呈現登錄組件。

組件：

 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的 prop 函數。 但是在測試文件中，您正在導入沒有 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)
    })
 })

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 訪問道具。