React-Redux Connected Component testing correct action has been dispatch on click event

Question

I'm a newbie to testing react-redux components with jest and enzyme, and so far i've be finding this a challenge.

I have a login page, and i want to test that the correct error action is dispatch if login fails after the login button is clicked.

So this is how I'm testing my connected component,

require('../jsDomSetup');
import React from 'react';
import { Provider } from 'react-redux';
import loginDefault, {Login}  from '../../app/routes/Login/LoginContainer';
import {mount, shallow} from 'enzyme';
import loginActions from '../../app/redux/actions/loginActions';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import nock from 'nock';

describe("login container component", function(){

 afterEach(() => {
   nock.cleanAll();
 });

test("loginFailure action is called when login failed due to no crendetials", () =>{
  nock('http://192.168.0.2:3000')
  .get('/graphql?prettify=true')
  .replyWithError('login failed');

    // Error message: Incorrect username and password please try again
    const mockStore = configureMockStore([thunk]);
    const store = mockStore();
    const output = mount(<Provider store={store}><loginDefault></loginDefault></Provider>)
    let loginButton = output.ref('loginButton');
    expect(store.getActions().length).toBe(0);
    loginButton.simulate('click');
    expect(store.getActions().length).toBe(1);
});

At the moment when i run this test, it's failing when trying to simulate the click it can't find the button element. However this ref exists, and when I try a simple search like a button it's still can't find any Button. So i assume the mount is returning some silent error or something.

I just want to check that the correct action is called when login fails.

How do i make this test pass?

Answer 1

You are almost there, this works for me.
e.g.

test("loginFailure action is called when login failed due to no crendetials", () =>{
    nock('http://192.168.0.2:3000')
   .get('/graphql?prettify=true')
 .replyWithError('login failed');

    // Error message: Incorrect username and password please try again
    const mockStore = configureMockStore([thunk]);
    const store = mockStore();

    const withProvider = (
            <Provider store={store}>
                <loginDefault />
            </Provider>
        );

    const wrapper = mount(withProvider);
    let loginButton = wrapper.find('button'); //here you can use other selector like #myButton or .btn, but be sure it can find it.
    loginButton.simulate('click');
    
    const unsubscribe = store.subscribe(() => {     
                    const actions = store.getActions();
      //here your expectation after the action is raised
                    expect(actions.length).to.have.length.above(0);
                });

    expect(store.getActions().length).toBe(0);    

});

Hope this help.