antd+redux+enzyme,测试antd提供的Form组件时有问题了
Login=Form.Create()(LoginForm) => A=Form.Create()(B)
想测试原生的B,可是B经过Form经过一层封装,里面的getFieldDecorator()函数又必须依赖Form创建完成后的A才行,因此mount(B)是编译不通过的,必须mount(A)才编译通过,可是我的期望是在编译期间设置B的props和context属性,来测试B的componentWillMount(里面用到props,context),这样似乎没办法做到,太坑了。
是不是测试antd组件无法用enzyme测试?
测试代码:
import React from 'react';
import { expect } from 'chai';
import { mount, shallow, render } from 'enzyme';
import { Login, LoginForm } from '../../login/Login';
describe('<Login />', () => {
it('Login componentWillMount', () => {
const props = {
action: () => {},
auth: {},
loading: false,
loginErrors: undefined,
isAuthenticated: false,
};
const context = {
router: { push: function(route) { this.route = route }, route: '', clear: function() { this.route = '' } },
store: {}
};
const component = mount(<LoginForm {...props} />,{ context });
expect(component.context().router.route).to.equal('');
component.setProps({
isAuthenticated: true,
});
expect(component.context().router.route).to.equal('/app');
});
});
报错代码:
<Login /> Login componentWillMount:
TypeError: Cannot read property 'getFieldDecorator' of undefined
at LoginForm.render (E:/Project/crm/trunk/client-bak5/src/views/login/Login.jsx:93:11)
at node_modules\react-dom\lib\ReactCompositeComponent.js:796:21
at measureLifeCyclePerf (node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
at null.ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext (node_modules\react-dom\lib\ReactCompositeComponent.js:795:25)
at null.ReactCompositeComponent._renderValidatedComponent (node_modules\react-dom\lib\ReactCompositeComponent.js:822:32)
at null.ReactCompositeComponent.performInitialMount (node_modules\react-dom\lib\ReactCompositeComponent.js:362:30)
at null.ReactCompositeComponent.mountComponent (node_modules\react-dom\lib\ReactCompositeComponent.js:258:21)
at Object.ReactReconciler.mountComponent (node_modules\react-dom\lib\ReactReconciler.js:46:35)
at null.ReactCompositeComponent.performInitialMount (node_modules\react-dom\lib\ReactCompositeComponent.js:371:34)
at null.ReactCompositeComponent.mountComponent (node_modules\react-dom\lib\ReactCompositeComponent.js:258:21)
at Object.ReactReconciler.mountComponent (node_modules\react-dom\lib\ReactReconciler.js:46:35)
at null.ReactCompositeComponent.performInitialMount (node_modules\react-dom\lib\ReactCompositeComponent.js:371:34)
at null.ReactCompositeComponent.mountComponent (node_modules\react-dom\lib\ReactCompositeComponent.js:258:21)
at Object.ReactReconciler.mountComponent (node_modules\react-dom\lib\ReactReconciler.js:46:35)
at mountComponentIntoNode (node_modules\react-dom\lib\ReactMount.js:104:32)
at ReactReconcileTransaction.TransactionImpl.perform (node_modules\react-dom\lib\Transaction.js:140:20)
at batchedMountComponentIntoNode (node_modules\react-dom\lib\ReactMount.js:126:15)
at ReactDefaultBatchingStrategyTransaction.TransactionImpl.perform (node_modules\react-dom\lib\Transaction.js:140:20)
at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
at Object.ReactMount._renderNewRootComponent (node_modules\react-dom\lib\ReactMount.js:320:18)
at Object.ReactMount._renderSubtreeIntoContainer (node_modules\react-dom\lib\ReactMount.js:401:32)
at Object.ReactMount.render (node_modules\react-dom\lib\ReactMount.js:422:23)
at Object.ReactTestUtils.renderIntoDocument (node_modules\react-dom\lib\ReactTestUtils.js:79:21)
at renderWithOptions (node_modules\enzyme\build\react-compat.js:187:26)
at new ReactWrapper (node_modules\enzyme\build\ReactWrapper.js:94:59)
at mount (node_modules\enzyme\build\mount.js:19:10)
at Context.<anonymous> (E:/Project/crm/trunk/client-bak5/src/views/_tests_/login/Login.test.js:28:21)
学习是最好的投资!