3

I have the following component: 

export const FormikInput: React.SFC<Props> = (props: Props) => {
   const handleChange = (value: string) => {
       // do something
       props.setFieldValue(props.key, value);


    return (
           <TextField
            label={props.label}
            onChangeText={handleChange}
            value={props.values[props.key]}
        />
);

};

And I want to call the handleChange method user react-test-renderer Is that possible?

Anh Tuan Nguyen
  • 429
  • 1
  • 6
  • 18
  • listen react-test-render is for snapshot testing. Are you doing component behavioral testing then you should do shallow rendering and mock the handle change function. – Sakhi Mansoor Aug 23 '18 at 13:42
  • yes i want to test the behaviour of my handlechange function. Could you give me an example? – Anh Tuan Nguyen Aug 23 '18 at 13:55

1 Answers1

-1

Give a classname to TextField and mock your handleChange like this:

describe('handleChange event success', () => {
it('handleChange invokes without throwing an error', () => {
    const handleChange = jest.fn();
    const wrapper = shallow(<YourComponent
      handleChange ={handleChange}
       />);
    wrapper.find('.myTextField').simulate('change');
    expect(handleChange ).toHaveBeenCalled();
  });
});

There might be some tweaks needed for your TS, I have written this for JS

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37