如果回调未作为道具传递，如何使用 jest 检查对子组件的点击？

Question

I have the following component:

  <MaxFrContainer data-test="wellness-report-card">
      <PrimaryBlueButton
       onClick={() => {
        // open popup
        }}
       >
        generate
      </PrimaryBlueButton>
  </MaxFrContainer>

Jest complains that the onClick call isn't tested, but how do I test it? Whatever he callback would be, it is defined within the component and not passed down as a prop. Also, this similar thing repeats in my code. Sometimes it opens a popup, sometimes it makes an API call.

How do I get these tested

Answer 1

Can you be more specified what do you do in //open popup ?

If I would create such component there are should be separate module with business logic, and in onClick handler I should just call some method from this module.

<MaxFrContainer data-test="wellness-report-card">
      <PrimaryBlueButton
       onClick={() => MaxFrContainerController.clickHandler()}
       >
        generate
      </PrimaryBlueButton>
  </MaxFrContainer>

And to test onClick you should only check that clickHandler of mock MaxFrContainerController was called.