Cannot Step Into Code at Breakpoints

Breakpoint on function declaration is hit on function loading; it's not executed at this moment, the debugger jumps to next declaration.

Set breakpoint on a call to component() function, and, once it's hit, use Step In to step into function body

This code lives in a React Container.  Ultimately that code is in a method that's called during this container's render():

render

render() {
  const {
    panels,
    seo,
    errors,
    coordinates,
    setLoading,
  } = this.props;

  if (errors) return getErrorComponent(errors);
  const tags = setHelmetTags(seo);
  if (coordinates && (!panels || panels.length === 0)) return <Loader setLoading={setLoading} className="ft-loader" />;

  return (
    <div className={style.screen}>
      <StickyContainer>
        { this.renderLocationPopup() }
        { tags }
        { this.renderPlayerOrBanner() }
        { this.renderShowSchedules() }
      </StickyContainer>
    </div>
  );
}

renderPlayerOrBanner

renderPlayerOrBanner() {
  const { geoLocationDeclined, geoLocationLoading } = this.state;
  const { coordinates, setLoading } = this.props;
  const isAndroid = detectMobileDevice() === DEVICE_ANDROID;
  if (isAndroid) return this.renderMobileCTA();
  let output;

  const component = () => {
    console.log("start")
    if (isStaticRender()) {
      console.log("1")
      output = <div className={style.playerSpacer} />;
    }
    if (geoLocationLoading === true) {
      console.log("2")
      output = <Loader setLoading={setLoading} />;
    }
    ...rest of the code
    
    output = output || this.renderPlayer();

    return output;
  };

  const updaterCompnent = <UpdaterComponent>{component}</UpdaterComponent>;

  return (updaterCompnent);
}

So it doesn't matter if I set a breakpoint on either of these lines, it's not hitting debug points in component and just ends up going right to the end of my test's assertion:

const updaterCompnent = <UpdaterComponent>{component}</UpdaterComponent>;

or

{ this.renderPlayerOrBanner() }

The Test that runs this

it.only('renders video player if an iOS device ', () => {
  const store = createStore(reducers, { live: { panels: [{ member: [{}] }] } }),
    //...some code lives here, removed it for this post...

    const liveScreen = shallow(
      <Live
        coordinates={{}}
        breakpoint="site-web"
        renderInfoInDetail={() => {}}
        setOverlay={() => {}}
        store={store}
      />),

      videoPlayer = liveScreen.dive().dive().find('.ft-video-player');

    expect(videoPlayer).to.have.length(1); //it's getting here without hitting any component breakpoints
  });

Technical if you think about it React's going to call back the method renderPlayerOrBanner.  I'm rendering this via shallow() render using enzyme.js.

So still stuck.

Here's a screencast, please watch this: https://youtu.be/tC0SIWGZTSo 

The weird thing about this is doesn't console.log anything either which makes you think it's not being run but clearly if I put debug points it's definitely getting to the function definition and to the final return statement of renderPlayerOrBanner

JSX code debugging is not supported (https://youtrack.jetbrains.com/issue/WEB-13986)

I'd suggest setting breakpoint at the first line of method body (console.log or whatever it is) and, once breakpoint is hit, use Step Over to step through the method

>Set breakpoint on a call to component() function

yea that's going to do me no good, without jsx support this kinda sucks TBH.  That function is a callback, called by the render() of my container when my container's render() calls 

{ this.renderPlayerOrBanner() }

actually this is funny, dumb mistake, the problem is that we weren't calling it

`const updaterComponent = <UpdaterComponent>{component()}</UpdaterComponent>`

works and debugs fine now. :P.  So...with that why do you say jsx isn't supported?  I've never had a problem hitting code that is inside jsx.