How to assert and test a ReactJS / Fluxible Component's state?

Question

My app is a Fluxible / React application.

I have the following spec that attempts to test a LoginForm. Embedded components have been stubbed using rewire. I referenced http://fluxible.io/api/components.html#testing.

The first spec it("renders") passes. However, when I try to do more tests as shown in the commented code, the test fails.

I am unable to assert on LoginForm's state or trigger simulated events using TestUtils on the component. Are there any ways to do that?

import React from 'react/addons';;
import { createMockComponentContext } from 'fluxible/utils';
import createStore from 'fluxible/addons/createStore';

var rewire = require("rewire");
var rewireModule = require("../../helpers/rewire-module");

// stub inner components with LoginForm
// `rewire` instead of `require`
var LoginForm = rewire("../../../src/components/auth/login-form");

// Replace the required module with a stub component.
rewireModule(LoginForm, {
  FormattedMessage: React.createClass({
    render: function() { return <div />; }
  }),
  NavLink: React.createClass({
    render: function() { return <div />; }
  })
});

describe('LoginForm', function() {
  var context;
  var TestUtils;
  var provideContext;
  var connectToStores;
  var MockIntlStore;
  var MockAuthStore;
  var noop = function(){};
  var component;

  beforeEach(function(){

    MockIntlStore = createStore({
      storeName: 'IntlStore',
      getMessage: noop,
      getState: function(){
        return {}
      }
    });

    MockAuthStore = createStore({
      storeName: 'AuthStore'
    });

    context = createMockComponentContext({
      stores: [MockIntlStore, MockAuthStore]
    });

    // React must be required after window is set
    TestUtils = React.addons.TestUtils
    provideContext = require('fluxible/addons/provideContext');
    connectToStores = require('fluxible/addons/connectToStores');

    // Wrap with context provider and store connector
    LoginForm = provideContext(connectToStores(LoginForm, [MockIntlStore, MockAuthStore], function (stores) {
      return {
      };
    }));

    component = TestUtils.renderIntoDocument(
      <LoginForm context={context} />
    );

  });

  it("renders", function() {


    var foundComponent = TestUtils.findRenderedDOMComponentWithClass(
      component, 'login-form');

    expect(foundComponent).toBeDefined();
  });

  // TODO fluxible wraps components so we cant reach the inner component to assert on state and trigger event handlers

  // it("should have an initial state", function() {

  //   let initialState = {
  //     username: '',
  //     pass: ''
  //   }

  //   expect(component.state).toEqual(initialState);
  // });
});

Answer 1

When you use provideContext and connectToStores, your component is wrapped. You have done it right to find the component using TestUtils. findRenderedDOMComponentWithClass, Simply use the foundComponent for test, that is what is being tested. i.e.

...
var foundComponent = TestUtils.findRenderedDOMComponentWithClass(
  component, 'login-form');
expect(foundComponent.state).toEqual(initialState);
...