Question

我正在用玩笑和酶测试reduxForm组件，但我不知道如何在该组件中测试方法。

我正在导出组件并对其进行自身测试，我可以访问方法，但组件无法识别reduxForm字段道具，例如meta，touched，error，inpute.t.c。

我如何模拟这些或使用reduxForm而不是单独的组件测试我的组件

经过测试的组件是Login组件，必须呈现2个字段。

这是“登录”组件：

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

错误提示

enter image description here

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

您可以参考此存储库，了解如何通过集成和单元测试正确测试redux表单。 https://github.com/tylercollier/redux-form-test

用玩笑和酶来测试reduxForm组件方法

1 个答案: