React/JestJS/Enzyme: How to test for ref function?
I solved the issue like this:
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);
I have entity component inside input which receives ref function.
The ref is attached to an instance of the component hence you will have to use mount
to get an instance of the component.
To test for the ref
, add the following line
expect(wrapper.instance().refInput).toBeTruthy();
Final result:
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();
})