I have simple react component, that use Card from antd:
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);
Now I write some simple test and want to check, that my TBD component use
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);
});
});
And it fail, because 3 shallow return me
<Component title="Menu1">
TODO
</Component>
But I'm expect
<Card title="Menu1">
TODO
</Component>
After one more render I get pure html from rendering . I'm not understand why it render it to instead and how I can get result what I want.
Aucun commentaire:
Enregistrer un commentaire