Javascript React/JestJS/Enzyme：如何测试ref函数？

我正在使用Jest和Ezyme为这个非常简单的组件运行单元测试

render（）

：

---

不在我的测试范围之内。要获得此示例组件的完整单元测试，我必须做什么？

ref附加到组件的实例，因此您必须使用ref获取组件的实例

要测试

ref

，请添加以下行

expect(wrapper.instance().refInput).toBeTruthy();

最终结果：

render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find(Input)).toHaveLength(1)
  expect(wrapper.instance().refInput).toBeTruthy();
})

render（）{
返回（{this.refInput=input}}
/>)
}
它（'应该呈现输入'，（）=>{
const wrapper=mount（）；
expect（wrapper.find（Input））.toHaveLength（1）
expect（wrapper.instance（）.refInput）.toBeTruthy（）；
})

我这样解决了这个问题：

const ref = React.createRef();
const props = { register: jest.fn(params => ref), label: "label text", ...params };
let wrapper = mount(
    <ThemeProvider theme={theme}>
        <Input {...props} />
    </ThemeProvider>
);
expect(wrapper.find(Entity).getElement().ref).toBe(ref);

const ref=React.createRef（）；
constprops={register:jest.fn（params=>ref），标签：“标签文本”，…params}；
让包装器=装入(
);
expect（wrapper.find（Entity.getElement（）.ref）.toBe（ref）；

---

我在输入中有实体组件，它接收ref函数。

您可能必须使用

mount

，如果您只想测试实例属性是否已设置，这可能就足够了。但是，如果您想使用该特定函数测试ref回调，它将不起作用：（请参阅）``函数CustomTextInput（props）{return（）；}类父级扩展React.Component{render（）{return（this.inputElement=el}/>）；}``问题是要获得完全覆盖。添加该测试可以提供100%的覆盖率（我确实进行了测试）。我没有得到你的评论。用答案更好地解释自己？理想情况下，您需要类似于

expect（wrapper.find（Input.ref（））.eq（wrapper.instance（）.props.inputRef）

的东西，假设您正在测试将inputRef prop作为ref回调传递的功能组件。不幸的是，Ezyme没有公开一些东西，比如

.ref（）

api。

expect（wrapper.instance（）.refInput）.toBeInstanceOf（Input）会更好。
render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find(Input)).toHaveLength(1)
  expect(wrapper.instance().refInput).toBeTruthy();
})

const ref = React.createRef();
const props = { register: jest.fn(params => ref), label: "label text", ...params };
let wrapper = mount(
    <ThemeProvider theme={theme}>
        <Input {...props} />
    </ThemeProvider>
);
expect(wrapper.find(Entity).getElement().ref).toBe(ref);