Question

我正在尝试模拟this.ref.current.value作为我的React组件中功能测试的一部分。当前current为空，因为我正在对组件进行浅层安装。我正在尝试寻找一种方法来模拟current.value为我的引用返回的内容，以便我可以测试该函数的另一部分，对于此测试，refs值实际上并不重要。

实际功能：

copyDefinitionTarget = selectedInput => () => {
    // get and select the input value
    const copyText = this[`${selectedInput}`].current.value;

    // copy to clipboard
    navigator.clipboard.writeText(copyText);
  };

测试代码：

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();
  });

测试失败：

TypeError: Cannot read property 'value' of null

      50 |     // get and select the input value
    > 51 |     const copyText = this[`${selectedInput}`].current.value;

有没有办法做到这一点？我关心的是测试navigator.clipboard的名称而不是它的名称。

正在更新，因为我将代码更改为使用this.ref而不是stringRefName 实际功能：

copyDefinitionTarget = selectedInput => () => {
    // get and select the input value
    const copyText = selectedInput.current.value;
    // copy to clipboard
    navigator.clipboard.writeText(copyText);
  };

测试代码：

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();
  });

函数调用：

<Item
 inputRef={this.firstNameRef}
 inputValue={`${realmName}`}
 copyDefinitionTarget={this.copyDefinitionTarget(this.firstNameRef)}
/>

Answer 1

您可以继续执行以下操作：

const component = shallow(<Alert {...props} />);
const selectedInput = 'ref';
component.instance()[selectedInput] = {
  current: {
    value: 'stuff'
  }
}
navigator.clipboard = {writeText: jest.fn()}
component
  .dive()
  .find('Item')
  .dive()
  .find('Button')
  .simulate('click');
expect(navigator.clipboard.writeText).toHaveBeenCalled();

注意：我不确定应该使用哪种字符串selectedInput，您可以根据实际组件代码传递任何合适的字符串。

由于ref作为组件的实例属性存在，因此只要传递您希望的任何对象，只要它看起来像current.value，就可以用模拟替换copy函数，模拟点击并然后查看是否调用了writeText。

Answer 2

发布另一种方法，以防您传递实际的ref而不是字符串。我将ref中的值获取到其自身的函数中，并在测试中对其进行了模拟

实际代码：

  // get the value from ref
  getRefValue = ref => ref.current.value;

  // copy value
  copyDefinitionTarget = selectedInput => () => {
    // get and select the input value
    const copyText = this.getRefValue(selectedInput);
    // copy to clipboard
    navigator.clipboard.writeText(copyText);
  };

测试代码：

it('calls navigator.clipboard appropriately to copy the text in copyDefinitionTarget', () => {
    component = shallow(<MetadataAlert {...props} />);
    instance = component.instance();

    jest.spyOn(instance, 'getRefValue').mockImplementationOnce(() => '');

    component
      .dive()
      .find('Item')
      .dive()
      .find('Button')
      .simulate('click');

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

嘲笑React Ref的当前值以进行浅层测试

2 个答案: