containerTests.js

/* eslint-env node, mocha */
import expect, { createSpy } from 'expect';
import { createStore } from 'redux';
import LoginScreen, { Component as LoginScreenComponent } from '../../src/containers/screens/LoginScreen';
import * as loginActions from '../../src/actions/loginActions';

describe('LoginScreen', () => {
  //regular component tests
});

describe('LoginScreenContainer', () => {
  const setup = (initialState) => {
    const renderer = createRenderer();
    const store = createStore((state) => state, initialState);
    expect.spyOn(store, 'dispatch');
    renderer.render(<LoginScreen store={store}/>);
    const output = renderer.getRenderOutput();

    return {
      store,
      output,
      renderer,
    };
  };

  it('renders the component correctly', () => {
    const { output } = setup({});
    expect(output.type).toBe(LoginScreenComponent);
  });

  it('passes store props correctly', () => {
    const { output } = setup({ loggedIn: false });
    expect(output.props.loggedIn).toEqual(false);
  });

  it('passes action props correctly', () => {
    expect.spyOn(loginActions, 'login');

    const { store, output } = setup({});
    const username = 'username';
    const password = 'password';

    output.props.login(username, password);

    expect(loginActions.login).toHaveBeenCalledWith(username, password);
    expect(store.dispatch).toHaveBeenCalledWith(loginActions.login(username, password));

    loginActions.login.restore();
  });
});

Originally, I felt that the action prop test was too verbose. Was it checking too much? But the test can't just check that the action creator was called - it needs to check that it was called with the right arguments, and dispatched appropriately.

Normally it'd just be testing code like:

const mapActionsToProps = (dispatch) => bindActionCreators(loginActions, dispatch);

But it needs to protect against cases like:

const mapActionsToProps = (dispatch) => ({
  login: (username, password) => dispatch(loginActions.login(username, username)),
});

Or:

const mapActionsToProps = (dispatch) => ({
  login: (username, password) => loginActions.login(username, password),
});

Where is createRenderer coming from?