I'm running unit tests using Jest and Enzyme for this very simple component render()
:
render() {
return (<Input
id='foo'
ref={input => { this.refInput = input }}
/>)
}
it('should render Input', () => {
wrapper = shallow(<Component />)
expect(wrapper.find(Input)).toHaveLength(1)
})
I'm also using the coverage option of Jest and there I see, that the line
ref={input => { this.refInput = input }}
is not covered by my test. What do I have to do to get a full covered unit test for this sample component?
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();
})
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.