These are chat archives for airbnb/enzyme

17th
Feb 2017
Philip Chmalts
@philipchmalts
Feb 17 2017 19:24
Hey guys got a quick question on how test a HoC, Im trying to make sure that a function gets called during componentWillMount but that function is passed down through mapDispatchToProps, having a hard time figuring out how to make sure it is called
Im using jest btw
component.find('WrappedComponent').props().initialize = jest.fn();
does not appear to be working
Jordan Harband
@ljharb
Feb 17 2017 19:25
you can't mutate props like that
what does the function do that you can't just let it be called normally?
ie, i'd recommend all tests be integration tests
also, if you're trying to ensure that, i'd use shallow-rendering
Philip Chmalts
@philipchmalts
Feb 17 2017 19:26
all the function does is trigger an action and its already tested
  componentWillMount() {
      if (!window.google) {
        const script = document.createElement('script');

        script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBOcJLYa-0z9XLPF70Ddykm6uV01zYmQ48&libraries=places';

        script.onload = this.initializeGoogleMaps;
        document.body.appendChild(script);
      } else {
        this.initializeGoogleMaps();
      }
    }
Jordan Harband
@ljharb
Feb 17 2017 19:27
a) that doesn't mean you can't test it again, but b) can you use jest module mocking to mock out the action, and assert that it's triggered?
hm, that's going to be tough to test
you can definitely stub initializeGoogleMaps on the instance
Philip Chmalts
@philipchmalts
Feb 17 2017 19:28
yeah but its wrapped in a connect
Jordan Harband
@ljharb
Feb 17 2017 19:28
ok but the instance method isn't?
the wrapper handles props
this.foo isn't a prop, it's an instance method
Philip Chmalts
@philipchmalts
Feb 17 2017 19:29
yeah that instance method calls a prop
since its a hoc
I can actually get the coverage to do everything correctly but I figured by mocking the prop
I could ensure that the instance method is being called
Im also at the point where I feel I've been looking at this for too long and may be trying to do something that isn't meant to be done
if you want
I can send you the full compnent if that would help
Philip Chmalts
@philipchmalts
Feb 17 2017 19:49
export const mapDispatchToProps = (dispatch, ownProps) => ({
  dispatch,
  initialize: (form, addressRef) => dispatch(initialize(form, addressRef)),
  getPredictions: (searchText) => dispatch(getPredictions(searchText)),
  selectAddress: (placeId) => dispatch(selectAddress(placeId, ownProps.type))
});


export default function AddressAutocomplete(ComposedComponent) {
  class WrappedComponent extends Component { //eslint-disable-line

    constructor() {
      super();
      this.initializeGoogleMaps = this.initializeGoogleMaps.bind(this);
      this.getRef = this.getRef.bind(this);
    }
    componentWillMount() {
      if (!window.google) {
        const script = document.createElement('script');

        script.src = 'https://maps.googleapis.com/maps/api/js?key=apikey&libraries=places';

        script.onload = this.initializeGoogleMaps;
        document.body.appendChild(script);
      } else {
        this.initializeGoogleMaps();
      }
    }

    getRef(inputRef) {
      this.addressRef = inputRef;
    }

    initializeGoogleMaps() {
      this.props.initialize(this.props.formName, this.addressRef);
    }


    render() {
      return (
        <ComposedComponent
          addressRef={this.getRef} //eslint-disable-line
          {...this.props}
        />
      );
    }
    }

  WrappedComponent.propTypes = {
    initialize: PropTypes.func.isRequired,
    formName: PropTypes.string.isRequired
    // getPredictions: PropTypes.func.isRequired
  };
  const mapStateToProps = createStructuredSelector({
    matches: makeSelectMatches()
  });

  return connect(mapStateToProps, mapDispatchToProps)(WrappedComponent);
}
thats the whole Im trying to test, its of a complicated setup but getting down to the connected props is where Im at a loss
Jordan Harband
@ljharb
Feb 17 2017 21:28
@philipchmalts ok so you should have separate tests
one that ensures the instance method is called
and then separately, directly test the wrapped component (which should be exported separately), and test that the instance method calls the prop
Philip Chmalts
@philipchmalts
Feb 17 2017 21:33
omg, thank you so much I just realized I could extract the WrappedComponent entriely
and export it