vendredi 29 juin 2018

Testing High-Order component with enzyme and jasmine

I'm new to testing with Jasmine and Enzyme and I've been trying to test a HOC which is connected to redux. Take for instance the following HOC:

import React, { Component } from 'react';
import { connect } from 'react-redux';

const WithAreas = (WrappedComponent) => {
  class WithAreasComponent extends Component {
    constructor(props) {
      super(props);    
    }    

    shouldRenderWrappedComponent(userObj) {
      return !!userObj.areas;
    }

    render() {
      const { userObj } = this.props;

      return shouldRenderWrappedComponent(userObj)
        ? <WrappedComponent {...this.props} />
        : null;
    }
  }

  function mapStateToProps(state) {
    const { info } = state;
    const { userObj } = info.userObj;

    return { userObj };
  }

  return connect(mapStateToProps)(WithAreasComponent);
};

export default WithAreas;

Let's say I want to test this HOC in order to check if the wrapped component is being render according to the userObj. I thought about doing a mock component and pass it to the HOC, but this is not working.

Test.js File:

import React from 'react';
import { shallow } from 'enzyme';
import jasmineEnzyme from 'jasmine-enzyme';

import { WithAreas } from './';

class MockComponent extends React.Component {
  render() {
    return(
      <div> MOCK </div>
    );
  }
}

function setup(extraProps) {
  const props = {
   info: {
    userObj: {
     id: 'example1'
    }
   },
  };

  Object.assign(props, extraProps);

  const WithAreasInstance = WithAreas(MockComponent);
  const wrapper = shallow(<WithAreasInstance {...props} />);

  return {
    props,
    wrapper
  };
}

fdescribe('<WithAreas />', () => {
  beforeEach(() => {
    jasmineEnzyme();
  });
  it('should render the Mock Component', () => {
    const { wrapper } = setup();
    expect(wrapper.find(MockComponent).exists()).toBe(true);
  });
});

But it gives me this error:

TypeError: (0 , _.WithAreas) is not a function at setup (webpack:///src/user/containers/WithAreas/test.js:20:47 <- src/test_index.js:9:18060087) at UserContext.<anonymous> (webpack:///src/user/containers//WithAreas/test.js:34:24 <- src/test_index.js:9:18060822) What am I doing wrong? Or what approach might you recommend?

Thanks for any given help.

Aucun commentaire:

Enregistrer un commentaire