How to test a simple async React action with Jest?

Question

I am trying to test a Redux action and need assistance with testing an action with side-effects.

Here is my action :

export function login(email, password) {
  return dispatch => {
    dispatch(setLoginSuccess(false));
    loginApi(email, password, error => {
      dispatch(setLoginPending(false));
      if (!error) {
        dispatch(setLoginSuccess(true));
      } else {
        dispatch(setLoginError(error));
      }
    });
  }
}

Below is the loginApi function to authenticate user :

export function loginApi(email, password, callback) {
    if (email === '[email protected]' && password == '123') {
      return callback(null);
    } else {
      return callback(new Error('Please provide valid email and password'));
    }
};

Additionally, I am facing an issue while simulating a form submit in my component with Enzyme and Jest.

Here is the code for the same :

render() {
        let {email, password, emailValid} = this.state;
        let {isLoginPending, isLoginSuccess, loginError} = this.props;     
        return (
                <div className="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
                    <h3 className="text-center">Login</h3>
                    <form className="login-form" onSubmit={this.handleSubmit.bind(this)}>
                        <div className={emailValid? "form-group has-success" : (emailValid == undefined)? "form-group": "form-group has-error"}>
                            <label>Email address</label>
                            <input type="email" name="email" className="form-control" ref="userEmail" 
                            placeholder="Enter your email" onChange={this.handleChange.bind(this)}/>
                        </div>

                        {/* Checking if email valid or not */}
                        {this.props.emailValid? "" : (this.props.emailValid == undefined)? "" : <p className="text-danger">Please provide a valid email!</p>}

                        <div className="form-group">
                            <label>Password</label>
                            <input type="password" name="password" className="form-control" ref="userPassword"
                            placeholder="Enter your password" onChange={this.handleChange.bind(this)}/>
                        </div>

                        <button type ="submit" className="btn btn-primary btn-block" disabled={!this.props.emailValid}>Get Started</button>

                        {/* Displaying error messages */}
                        { loginError && <div className="auth-error-msg"><p className="text-danger">{loginError.message}</p></div> }
                    </form>
                </div>
        );
    };

Here is the code for the handleSubmit event:

handleSubmit(e){
    e.preventDefault();
    this.props.login(this.refs.userEmail.value, this.refs.userPassword.value);
    this.setState({
      email: '',
      password: ''
    });

}

I am trying to simulate the Submit event in this way :

 it('should render 1 error block on submitting invalid form', () => {
        // Render a checkbox with label in the document
        const spy = jest.fn();
        const component = shallow(<Login login={spy}/>);

        const form = component.find('form').simulate('submit');

});

But it currently throws an error as it cannot find preventDefault. How do I test this event?

Mario F · Accepted Answer · 2017-09-03 15:07:42Z

1

I would recommend you to split the testing. Submitting the form and testing the actions are two separate things. For testing the action with jest, you need to dispatch the action to a mock store, and see which is the final state of the store. Something like this:

describe('actions', () => {
  let store

  beforeEach(() => {
    store = mockStore({})
  })

  it('should dispatch the correct actions', () => {
    const expectedActions = [
      { type: 'action1', ...arguments },
      { type: 'action2', ...arguments }
    ]

    store.dispatch(login('user', 'password'))
    expect(store.getActions()).toEqual(expectedActions)
  })
})

you can do multiple test cases, adapting the expected actions to what you passed as parameters.

For creating a mock store, there are multiple packages that can do the job. Here is one example with support for thunks:

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)  
export default mockStore

I personally would not spend too much effort testing that the form submits. At the end, that is a standard html thing, so I would instead focus on the components that you have built yourself.

And another tip: If you have gone through all the trouble of using redux, don't fall back to normal state. That setState that you have would be much more easily implemented, and tested, by using a normal reducer and getting that into your state as well.

edited Sep 3, 2017 at 15:07

answered Sep 3, 2017 at 14:38

Mario F

47.5k6 gold badges39 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arindam Dawn Over a year ago

Thanks, @Mario for your explanation. I have a small doubt. I haven't used promises in my action so an error will be thrown if I use 'then' in my test. I went through the redux docs and they too have a similar example using promises but in my case I am just simply waiting for the loginApi function callback so how do I refactor the test? Please help!

Mario F Over a year ago

I edited the example for the synchronous case. You just need to remove the then and do your assertions just after dispatching the action

Arindam Dawn Over a year ago

Can you assist me with testing the "handleSubmit" event on clicking the form? It's very basic but it's important for me to get these clear. Thanks in advance!

Mario F Over a year ago

I think your problem lies here. I'm not quite sure how to deal with that. You could try mount instead of shallow to get a more complete component? You can also adapt the code to only call preventDefault if the event has the function, although that is sort of adapting the code to pass the test.

Arindam Dawn Over a year ago

Thanks! that's a great help!

Collectives™ on Stack Overflow

How to test a simple async React action with Jest?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related