How to test react hooks with enzyme - jestjs

Question

I encountered a problem during the TDD process and the state of react hooks did not change as expected
// Header.tsx
import React, { useState, ChangeEvent, KeyboardEvent } from 'react';
interface Props {
addUndoItem: (item: string) => void;
}
function Header(props: Props) {
const [value, setValue] = useState('');
const handleChange = (e: ChangeEvent<{ value: string }>) => {
setValue(e.target.value);
};
const handleKeyUp = (e: KeyboardEvent) => {
if (value && e.keyCode === 13) {
props.addUndoItem(value);
}
};
return (
<div>
<input
onChange={handleChange}
onKeyUp={handleKeyUp}
value={value}
data-test="input"
/>
</div>
);
}
// tests/Header.tsx
it('the fn may invoked when press enter', () => {
const userInput = 'test';
const fn = jest.fn();
const wrapper = shallow(<Header addUndoItem={fn} />);
const inputEle = wrapper.find('[data-test="input"]');
inputEle.simulate('change', {
target: {
value: userInput
}
});
inputEle.simulate('keyUp', {
keyCode: 13
});
expect(fn).toHaveBeenCalled();
expect(fn).toHaveBeenCalledWith(userInput);
});
when exec simulate change, the value in Header hooks is still '' it should be test, it run successful in browser
the error is
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
48 | keyCode: 13
49 | });
> 50 | expect(fn).toHaveBeenCalled();
| ^
51 | expect(fn).toHaveBeenCalledWith(userInput);
52 | });
53 |

Answer 1

You need to use mount instead of shallow, otherwise your input component won't be properly rendered and therefore won't be usable during the test.