问题:

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?

回答1:

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();
})

回答2:

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.