如何断言和测试 ReactJS / Fluxible 组件的状态？

Question

我的应用程序是 Fluxible/React 应用程序。

我有以下试图测试登录表单的规范。嵌入式组件已使用 rewire 存根。我引用了 http://fluxible.io/api/components.html#testing.

它（"renders"）的第一个规范通过了。但是，当我尝试按照注释代码中所示进行更多测试时，测试失败了。

我无法断言 LoginForm 的状态或使用组件上的 TestUtils 触发模拟事件。有什么办法吗？

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

当您使用 provideContext 和 connectToStores 时，您的组件将被包装。使用 TestUtils. findRenderedDOMComponentWithClass 找到组件你已经做对了，只需使用 foundComponent 进行测试，这就是正在测试的内容。即

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

Answer 2

如果您仍在寻找解决方案：

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

那么你的方法在这里：

    renderer._instance._instance.myMethod

其中 myMethod 是组件的函数成员 x

如何断言和测试 ReactJS / Fluxible 组件的状态？

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

unit-testing

reactjs

fluxible