I am trying to mock this.ref.current.value as part of a test of a function in my React component.
Currently current is null because I am doing a shallow mount of my component. I am trying to find a way to mock what current.value returns for my ref so that I can test another part of the function, what the refs value is doesn't actually matter for this test.

Actual function:

copyDefinitionTarget = selectedInput => () => {

    // get and select the input value

    const copyText = this[`${selectedInput}`].current.value;



    // copy to clipboard

    navigator.clipboard.writeText(copyText);

  };

Test code:

it('calls navigator.clipboard appropriately to copy the text in copyDefinitionTarget', () => {

    component = shallow(<Alert {...props} />);



    component

      .dive()

      .find('Item')

      .dive()

      .find('Button')

      .simulate('click');



    expect(navigator.clipboard.writeText).toHaveBeenCalled();

  });

Test failure:

TypeError: Cannot read property 'value' of null



      50 |     // get and select the input value

    > 51 |     const copyText = this[`${selectedInput}`].current.value;

Is there any way to do this? I care about testing that navigator.clipboard was called not what it was called with.

Updating because I've changed my code to use this.ref instead of stringRefName
Actual function:

copyDefinitionTarget = selectedInput => () => {

    // get and select the input value

    const copyText = selectedInput.current.value;

    // copy to clipboard

    navigator.clipboard.writeText(copyText);

  };

Test code:

it('calls navigator.clipboard appropriately to copy the text in copyDefinitionTarget', () => {

    component = shallow(<Alert {...props} />);

instance = component.instance();



    // we are clicking on the first Alert Item

    // so mock that ref specifically

    instance.firstNameRef = {

      current: {

        value: 'stuff'

      }

    };



    component

      .dive()

      .find('Item')

      .dive()

      .find('Button')

      .simulate('click');



    expect(navigator.clipboard.writeText).toHaveBeenCalled();

  });

Function call:

<Item

 inputRef={this.firstNameRef}

 inputValue={`${realmName}`}

 copyDefinitionTarget={this.copyDefinitionTarget(this.firstNameRef)}

/>