我的应用程序是 Fluxible/React 应用程序。
我有以下规范尝试测试登录表单。嵌入式组件已使用重新接线进行 stub 。我引用了http://fluxible.io/api/components.html#testing .
它(“渲染”)通过的第一个规范。但是,当我尝试进行更多测试(如注释代码中所示)时,测试失败。
我无法在组件上使用 TestUtils 断言 LoginForm 的状态或触发模拟事件。有什么办法可以做到这一点吗?
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);
// });
});
最佳答案
当您使用provideContext
时和connectToStores
,您的组件已被包装。您已经正确地使用 TestUtils. findRenderedDOMComponentWithClass
找到了该组件。 ,简单地使用foundComponent进行测试,那就是正在测试的东西。即
...
var foundComponent = TestUtils.findRenderedDOMComponentWithClass(
component, 'login-form');
expect(foundComponent.state).toEqual(initialState);
...
关于unit-testing - 如何断言和测试 ReactJS/Fluxible 组件的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29921404/