How to assert and test the state of ReactJS / Fluxible Component?

My app is a Fluxible / React app.

I have the following spec which is trying to validate LoginForm. Inline components have been trimmed using rewire. I referenced .

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

I am unable to assert the state of the LoginForm or fire simulated events with TestUtils on the component. Are there any ways to do this?

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;


    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');


  // 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);
  // });



source to share

2 answers

When you use provideContext

and connectToStores

, your component is wrapped. You did it right to find the component using TestUtils. findRenderedDOMComponentWithClass

, just use foundComponent for testing, this is what is being tested. i.e.

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




If you are still looking for a solution:

    var tbg = React.createElement(x, { di: serviceLocator });
    var renderer = React.addons.TestUtils.createRenderer();
    var rtbg = renderer.render(tbg);


Then your method is here:



Where myMethod is a member of a component function x



All Articles