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?
Both Jest and Enzyme are meant to test the react applications. Jest can be used with any other Javascript framework, but Enzyme is meant to run on react only. Jest can be used without Enzyme, and snapshots can be created and tested perfectly fine. But the Enzyme adds additional functionality to it.
A few days ago, React released version 18, which is not compatible with Enzyme. Furthermore, it probably is not achievable to use Enzyme with React 18. If you're still using Enzyme, it is time to look into alternatives. The most popular option besides Enzyme seems to be React Testing Library.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With