sepulka sepulka - 1 month ago 16
Javascript Question

Enzyme: shallow render inner react-redux components

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 Card

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);
});
});


And it fail, because 3 shallow return me

<Component title="Menu1">
TODO
</Component>


But I'm expect

<Card title="Menu1">
TODO
</Card>


After one more render I get pure html from rendering Card I'm not understand why it render it to Component instead Card and how I can get result what I want.

Update



Example that simplifier my question. Next test fail:

describe('TBD', function () {
it('Renders a Card', function () {
const component = shallow(<TBD />);
console.log(component.debug());
expect(component.equals(<Card/>)).is.equal(true);
});
});


Debug output in console:

<Component title={[undefined]}>
TODO
</Component>


But I expect:

<Card title={[undefined]}>
TODO
</Card>

Answer

Problem in Ant Delvelope components. Part of this components writed as simple anonymous functions, without extend React.Component, etc. In result Enzyme render it like <Component />, in browser it look like <StatelessComponent />.

Comments