Испытание методов компонента reduxForm с шуткой и энзимом

Question

Я тестирую компонент reduxForm с шуткой и энзимом, и я не знаю, как я могу проверить методы в этом компоненте.

Я экспортирую компонент и тестирую его сам, у меня есть доступ к методам, но компонент не распознает реквизиты поля reduxForm, такие как мета, касание, ошибка, ввод и т. Д.

КакЯ могу смоделировать их или протестировать свой компонент с помощью reduxForm, а не как отдельный

Протестированный компонент является компонентом Login и должен отображать 2 поля.

Это компонент Login:

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

    }

    render() {

        const { handleSubmit } = this.props

        return (

            <div>
                <div className="login-form">
                    <form onSubmit={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 btn-clicked">Login </button>

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

 export const validate = (values) => {
    const errors = {}

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

    // 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, mount } from 'enzyme'
import  { Login }  from '../../components/login/login'
import { validate } from '../../components/login/login'


	const mockHandleSubmit = jest.fn()
	const renderField = jest.fn()
	const mockRenderPasswordField = jest.fn()
	const wrapper = shallow(<Login handleSubmit={mockHandleSubmit}  />)

	const loginButton = wrapper.find('#login_button')

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

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

    it(' call handlesSubmit when submit button is clicked', () => {
		loginButton.simulate('click')
		expect(mockHandleSubmit).toHaveBeenCalled()
	})
	
 })

 describe('renderField and renderPasswordField functions', () => {


	it('renderField', () => {
		expect(wrapper.instance().renderField()).toEqual(1)
	})

 })

И ошибку, которую он мне дает

введите описание изображения здесь

Answer 1

Чтобы смонтировать обернутый компонент reduxForm, вам нужно обернуть ваш компонент в

mount(
            <Provider store={store}>
                <Login {...props}/>
            </Provider>
)

, отметив, что вам нужно заранее создать собственное хранилище, как это

import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
store = createStore(combineReducers({ form: formReducer }))

Вы можете обратитьсяв этот репозиторий о том, как правильно тестировать избыточную форму с помощью интеграции и модульных тестов.https://github.com/tylercollier/redux-form-test