我正在尝试使用Jest和Enzyme编写针对React组件的测试，但是无论尝试如何，我都会不断遇到相同的错误Actions must be plain objects. Use custom middleware for async actions.。该组件本身可以正常工作。
组件为：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import signUp from '../../actions/users/sign_up';
import PropTypes from 'prop-types';
class Signup extends Component {
constructor (props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.showError = this.showError.bind(this);
}
handleChange(event) {
const target = event.target;
this.setState({ [ target.name ]: target.value });
}
handleSubmit(event) {
event.preventDefault();
this.props.signUp(this.state);
}
showError(type) {
if (this.state && this.state.error && this.state.error.data.errors[ type ]) {
return this.state.error.data.errors[ type ][ 0 ];
}
}
componentDidUpdate (prevProps, prevState) {
const props = this.props;
if (prevProps === props) {
return;
}
this.setState({
...props,
});
}
render () {
return (
<div className='container-fluid'>
<div className='row'>
<div className='col col-md-6 offset-md-3 col-sm-12 col-12'>
<div className='card'>
<div className='card-header'>
<h4>Sign Up</h4>
</div>
<div className='card-body'>
<form onSubmit={ this.handleSubmit } >
<div className="form-row">
<div className="form-group col-md-12">
<label htmlFor="email">Email</label>
<input
type="email"
name="email"
className={ `form-control ${ this.showError('email') ? 'is-invalid' : '' }` }
id="email"
placeholder="Email"
onChange={ this.handleChange }
/>
<div className="invalid-feedback">
{ this.showError('email') }
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-12">
<label htmlFor="username">Username</label>
<input
type="text"
name="username"
className={ `form-control ${ this.showError('username') ? 'is-invalid' : '' }` }
id="username"
placeholder="Username"
onChange={ this.handleChange }
/>
<div className="invalid-feedback">
{ this.showError('username') }
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-12">
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
className={ `form-control ${ this.showError('password') ? 'is-invalid' : '' }` }
id="password"
placeholder="Password"
onChange={ this.handleChange }
/>
<div className="invalid-feedback">
{ this.showError('password') }
</div>
</div>
<button type="submit" className="btn btn-primary">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
function mapStateToProps (state) {
return {
email: state.UsersReducer.email,
username: state.UsersReducer.username,
password: state.UsersReducer.password,
error: state.UsersReducer.error,
}
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
signUp: signUp,
}, dispatch);
}
Signup.propTypes = {
email: PropTypes.string,
username: PropTypes.string,
passwrod: PropTypes.string,
signUp: PropTypes.func.isRequired
}
export default connect(mapStateToProps, mapDispatchToProps)(Signup);
signUp操作如下：
import { SIGN_UP, SHOW_USER_ERRORS } from '../types';
import axios from 'axios';
import { API_ROOT, setLocalStorageHeader } from './../../api-config';
import { push } from 'react-router-redux';
export default function signUp (params) {
return dispatch => {
axios.post(`${ API_ROOT }/auth.json`, params).then(res => {
setLocalStorageHeader(res);
dispatch(push('/profile'));
dispatch(signUpAsync(res.data));
}).catch(error => {
dispatch({ type: SHOW_USER_ERRORS, payload: { error: error.response } });
});
}
}
function signUpAsync (data) {
return {
type: SIGN_UP,
payload: data
};
}
到目前为止，我的测试如下：
import React from 'react';
import { shallow, mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import Signup from '../../../components/users/signup';
import UsersReducer from '../../../reducers/reducer_users';
describe('<Signup />', () => {
describe('render()', () => {
test('submits the form data', () => {
const mockStore = configureStore();
const initialState = {
UsersReducer: {
email: '',
username: '',
password: '',
},
};
const store = mockStore(initialState);
const signUp = jest.fn();
const wrapper = shallow(<Signup store={store} signUp={signUp} />);
const component = wrapper.dive()
component.find('#email').simulate(
'change', {
target: {
name: 'email', value: 'foo@gmail.com'
}
}
);
component.find('#email').simulate(
'change', {
target: {
name: 'username', value: 'foo'
}
}
);
component.find('#password').simulate(
'change', {
target: {
name: 'password',
value: '1234567',
}
}
)
console.log(wrapper.props())
component.find('form').simulate(
'submit', {
preventDefault() {}
}
)
expect(signUp.mock.calls[1][0]).toEqual(
{ email: 'foo@gmail.com', username: 'foo', password: '12345678' }
)
});
});
});
错误Actions must be plain objects. Use custom middleware for async actions.不断被抛出handleSubmit：
22 | handleSubmit(event) {
23 | event.preventDefault();
> 24 | this.props.signUp(this.state);
| ^
25 | }
任何帮助将不胜感激，因为这正在我的脑海中！
*更新*
通过向测试中添加thunk并更改
const mockStore = configureStore();至const mockStore = configureStore([thunk]);
现在测试如下：
import React from 'react';
import { shallow, mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import { bindActionCreators } from 'redux';
import thunk from 'redux-thunk';
import Signup from '../../../components/users/signup';
import UsersReducer from '../../../reducers/reducer_users';
describe('<Signup />', () => {
describe('render()', () => {
test('submits the form data', () => {
const mockStore = configureStore([thunk]);
const initialState = {
UsersReducer: {
email: '',
username: '',
password: '',
},
};
const store = mockStore(initialState);
const signUp = jest.fn();
const wrapper = shallow(<Signup store={store} signUp={signUp} />);
const component = wrapper.dive();
component.find('#email').simulate(
'change', {
target: {
name: 'email', value: 'foo@gmail.com'
}
}
);
component.find('#email').simulate(
'change', {
target: {
name: 'username', value: 'foo'
}
}
);
component.find('#password').simulate(
'change', {
target: {
name: 'password',
value: '12345678',
}
}
)
component.find('form').simulate(
'submit', {
preventDefault() {}
}
)
expect(signUp).toHaveBeenCalledWith({
email: 'foo@gmail.com', username: 'foo', password: '12345678'
});
});
});
});
但是，由于无法成功模拟signUp调用，我仍然遇到错误：
Expected mock function to have been called with:
[{"email": "foo@gmail.com", "password": "12345678", "username": "foo"}]
But it was not called.
76 | )
77 |
> 78 | expect(signUp).toHaveBeenCalledWith({
| ^
79 | email: 'foo@gmail.com', username: 'foo', password: '12345678'
80 | });
81 |