Javascript 酶:浅层渲染内部redux组件
我有一个简单的react组件,它使用来自antd的卡:Javascript 酶:浅层渲染内部redux组件,javascript,reactjs,redux,react-redux,enzyme,Javascript,Reactjs,Redux,React Redux,Enzyme,我有一个简单的react组件,它使用来自antd的卡: import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Card } from 'antd'; export class TBD extends Component { constructor() { super(); } render() { return ( <C
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Card } from 'antd';
export class TBD extends Component {
constructor() {
super();
}
render() {
return (
<Card title={this.props.pathname}>
TODO
</Card>
);
}
}
export let select = (state) => {
return state.route;
};
export default connect(select)(TBD);
现在我写了一些简单的测试,想检查一下我的TBD组件是否使用卡
import React from 'react';
import {mount, shallow} from 'enzyme';
import {Provider, connect} from 'react-redux';
import {createMockStore} from 'redux-test-utils';
import {expect} from 'chai';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(chaiEnzyme());
import { Card } from 'antd';
import TBDConnected, {TBD, select} from '../src/js/components/TBD';
describe('Fully Connected:', function () {
it('show selected item text', function () {
const expectedState = {route: {pathname: 'Menu1'}};
const store = createMockStore(expectedState);
const ConnectedComponent = connect(select)(TBDConnected);
const component = shallow(<ConnectedComponent store={store} />).shallow().shallow();
console.log(component.debug());
expect(component.equals(<Card/>)).is.equal(true);
});
});
而它失败了,因为三个浅浅的人还我
<Component title="Menu1">
TODO
</Component>
但我很期待
<Card title="Menu1">
TODO
</Card>
在再一次渲染之后,我从渲染卡中得到了纯html,我不明白为什么它会将其渲染到组件卡中,以及如何得到我想要的结果
使现代化
这个例子简化了我的问题。下一次测试失败:
describe('TBD', function () {
it('Renders a Card', function () {
const component = shallow(<TBD />);
console.log(component.debug());
expect(component.equals(<Card/>)).is.equal(true);
});
});
控制台中的调试输出:
<Component title={[undefined]}>
TODO
</Component>
但我希望:
<Card title={[undefined]}>
TODO
</Card>
您不需要测试整个连接的组件。 我将首先测试表示纯组件作为单元测试,然后您可以单独测试连接器 即 如您所见,您的纯组件必须作为纯函数进行测试。你通过一些道具,并期待一些渲染
然后,当您测试连接器时,您可以断言它正确地映射了Ant Delvelope组件中的StateTrops和dispatchToProps…问题。此组件的一部分写为简单的匿名函数,没有扩展React.Component等。在结果中,它像在浏览器中一样呈现。connect是一个高阶组件,因此将卡包装在通用组件中。我认为浅层只会呈现第一层,这将是通用组件。这个讨论可能很有用:@davintroon,如果我扔掉所有redux部分连接、存储等,只渲染它单独导入的react组件:shall,那么我再次得到结果TODO。这将是完美的,但测试中的问题“渲染一张卡”,它失败了。console.logcomponent.debug;对于此测试中的组件,返回TODO。我不明白为什么它会在它的超类组件中呈现卡片。如果你使用纯函数而不是React.Component,它会呈现卡片吗?export const TBD={pathname}=>TODONo,仍然作为组件呈现。现在我更困惑了。这看起来像是antd组件中的问题。我用自己的组件尝试了同样的方法,所有的都很好。哦,我明白了,我们使用className和find“.my component”来断言如果一个组件呈现,我将调试我的纯arrow函数组件,看看它们的行为是否与您的一样。。。
import React from 'react';
import {shallow} from 'enzyme';
import {expect} from 'chai';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(chaiEnzyme());
import { Card } from 'antd';
import {TBD} from '../src/js/components/TBD';
describe('TBD', function () {
it('Renders a Card', function () {
const component = shallow(<TBD />);
expect(component.equals(<Card/>)).is.equal(true);
});
it('sets the right title', function () {
const component = shallow(<TBD pathname="example" />);
expect(component.prop('title')).is.equal("example");
});
});