vendredi 28 octobre 2016

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

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