How to mock a function in a component in Jest

I have not done any jest or testing in a long time and I'm struggling with this test. I have this button component where the value of disabled attribute comes from the redux store. When user logs in I am making a call to backend and saving some data in the redux store and then while browsing if a user gets to this particular page. I am reading the data from the store, modifying it to create an object then that is what is passed to the buttons.

My component has these two material-ui buttons.

<Button onClick={handleClick} disabled={!permissions.admin|| !permissions.moderator} id="btn-reports">Reports</Button>
<Button onClick={handleClick} disabled={!permissions.admin|| !permissions.moderator} id="btn-charts">Charts</Button>

Parent Component generates the value of permissions object from a helper function getPermissions (below) reading state directly from the store.

const getPermissions = () => {
  const permissions = store.getState().permisisons;
  const accessToButtons = {
    admin: false,
    moderator: false
  }

  for(const permission of permissions) {
    if (permission.admin === true) {
     accessButtons.admin = true;
    } else if (permission.moderator === true) {
     accessButtons.moderator= true;
    }
  }

  return accessToButtons;

}

Right now I am getting an error when I run jest because the button is disabled. I believe it has the default value of false and I am trying to write a test to check onclick which fails. I have a helper function for handleDisabled where I am iterating over an object in the store and based on that button is disabled. Can someone guide me what I need to do here. How do I mock the function by providing some mock values for that object so I have control over disabling/enabling those buttons. I have been playing around with jest.fn and jest.spyOn but I've had no luck.

Thank you.

  • Test input without label with React Testing Library

    I use react-testing-library in my application. Normally, to check if the input is in the form, we use getByLabelText. For example:

    getByLabelText(/name/i)
    

    But what if my input does not have any label? This is because of the design (UI) so I cannot have a label for the input. How can I check if that input exists in the form?