Javascript ReactJS：如何测试ref？

这是react组件中使用的函数。如您所见，我使用ref来获得另一个组件的特定输入元素的焦点

myFunction (param) {
  this.refInput && this.refInput.focus()
}

现在我想通过jestJS测试调用的

focus（）

it('myFunction() should call focus()', () => {
  // SETUP
  const refInput = { focus: jest.fn() }
  wrapper = shallow(<Example
    refInput={refInput}
  />)
  // EXECUTE
  wrapper.instance().myFunction('anything')
  // VERIFY
  expect(refInput.focus).toHaveBeenCalled()
})

---

尝试这样做：

it('myFunction() should call focus()', () => {
  // SETUP
  wrapper = mount(<Example />)
  // EXECUTE
  wrapper.instance().myFunction('anything')
  // VERIFY
  const elem = wrapper.find('#foo'); 
  const focusedElement = document.activeElement;
  expect(elem.matchesElement(focusedElement)).to.equal(true);
})

it（'myFunction（）应该调用focus（）'，（）=>{
//设置
包装器=mount（）
//执行
wrapper.instance（）.myFunction（'anything'）
//核实
const elem=wrapper.find（'#foo'）；
const focusedElement=document.activeElement；
expect（elem.matchesElement（focusedElement））.to.equal（true）；
})

注意事项：

使用Mount而不是Shallow，正如@Marouen Mhiri评论的那样，Shallow渲染不能保存ref

您不需要将ref作为道具传递（事实上这是错误的）

在我有wrapper.find（“#foo”）的地方，用输入中DOM元素的class/id替换foo

---

浅层渲染不维护内部实例，因此它不能保存ref。我认为为了测试ref，必须装载组件。请查看MountedRenderer，您使用的是哪个版本的react？如果是15.4.0或更高版本，请查看以下内容：。如果您显式地想要测试DOM节点，您必须使用Enzime（）@MarouenMhiri，我使用的是React 16和Enzyme…我理解您的代码，但在我的例子中，输入元素不能用ID标识。它只有一个类，因为需要很多这样的元素。这就是我使用refs的原因。当然，在这种情况下使用wrapper.find（'.yourClass'），我知道您说过这个类有很多元素，但是我们可以假设每个元素中只有1个吗？因为我们发现在挂载组件的上下文中，您可以发布组件的呈现方法吗？为了了解它的结构，在这种情况下，我们可以用输入组件中dom元素的class/id替换#foo吗？是的，我想我们可以添加一个类

it('myFunction() should call focus()', () => {
  // SETUP
  wrapper = mount(<Example />)
  // EXECUTE
  wrapper.instance().myFunction('anything')
  // VERIFY
  const elem = wrapper.find('#foo'); 
  const focusedElement = document.activeElement;
  expect(elem.matchesElement(focusedElement)).to.equal(true);
})