redux 양식을 사용하는 SignUp React 구성 요소가 있고 기본적으로 onSubmit은 비동기 작업을 전달합니다. Enzyme과 Jest를 사용하여 내 파견에 스파이를 추가하고 양식 제출을 시뮬레이션 할 때 파견을 요청하는지 검사하여 내 구성 요소를 테스트하려고합니다. 그러나 내 테스트는 실패합니다. 여기 양식 제출을 테스트 할 때 redux 양식의 효소 테스트가 실패합니다
import React from 'react';
import {reduxForm, Field, focus} from 'redux-form';
import Input from './input';
import {required, nonEmpty, email, isTrimmed, length} from '../validators';
import {registerUser} from '../actions/users';
import {login} from '../actions/auth';
export class SignUpForm extends React.Component {
onSubmit(values) {
const {username, password, fname, lname} = values;
const newUser = {
username,
password,
user: {
firstName: fname,
lastName: lname
}
};
return this.props
.dispatch(registerUser(newUser))
.then(() => this.props.dispatch(login(username, password)));
}
render() {
let errorMessage;
if (this.props.error) {
errorMessage = (
<div className="message message-error">{this.props.error </div>
);
}
return (
<form className='signup-form' onSubmit={this.props.handleSubmit(values =>
this.onSubmit(values)
)}>
{errorMessage}
<Field
name="fname"
type="text"
component={Input}
label="First Name"
validate={[required, nonEmpty]}
/>
<Field
name="lname"
type="text"
component={Input}
label="Last Name"
validate={[required, nonEmpty]}
/>
<Field
name="username"
type="email"
component={Input}
label="Email"
validate={[required, nonEmpty, email, isTrimmed]}
/>
<Field
name="password"
type="password"
component={Input}
label="Password"
validate={[required, nonEmpty, length({min: 10, max: 72})]}
/>
<button
type="submit"
disabled={this.props.pristine || this.props.submitting}>
Sign Up
</button>
</form>
);
}
}
export default reduxForm({
form: 'signup',
onSubmitFail: (errors, dispatch) =>
dispatch(focus('signup', Object.keys(errors)[0]))
})(SignUpForm);
내 테스트입니다 : : 여기
내 가입 REDUX 양식 구성 요소입니다
내 테스트는 다음과 같은 오류와 함께 실패
import React from 'react';
import {shallow, mount} from 'enzyme';
import SignUpForm from './signup';
import {registerUser} from '../actions/users';
import { reducer as formReducer } from 'redux-form'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk';
import {stockReducer} from '../reducers';
describe('<SignUpForm />',() => {
let store
let wrapper
let dispatch
beforeEach(() => {
store = createStore(combineReducers({ form: formReducer, stock: stockReducer }),applyMiddleware(thunk))
dispatch = jest.fn()
wrapper = mount(
<Provider store={store}>
<SignUpForm dispatch={dispatch}/>
</Provider>
);
})
it('should fire onSubmit callback when form is submitted', (done) => {
const form = wrapper.find('form');
form.find('#fname').simulate('change', {target: {value: 'fname'}});
form.find('#lname').simulate('change', {target: {value: 'lname'}});
form.find('#username').simulate('change', {target: {value: '[email protected]'}});
form.find('#password').simulate('change', {target: {value: 'password1234'}});
form.simulate('submit');
expect(dispatch).toHaveBeenCalled();
});
});
: 예상 (jest.fn()) toHaveBeenCalled.() 예상 모의 함수가 호출되었습니다.
무엇이 잘못되는지 이해해주세요.
reduxForm의 작동 방식을 잘 모르는 경우 reduxForm에서 실제 구성 요소 SignUpForm으로 디스패치해야합니까? 단지 아이디어 –