I have a simple component
const Summary = () => {
const [isFocused, setIsFocused] = useState(false);
const onFocus = React.useCallback(() => {
setEnableReplyShortcut(true);
}, []);
const onBlur = React.useCallback(() => setEnableReplyShortcut(false), []);
return (
<WrapperComponent>
<ComponentToFocus onFocus={onFocus} onBlur={onBlur} >
<Sum isFocused={isFocused}/>
</ComponentToFocus>
</WrapperComponent.Provider>
)
}
And I have jest test
import { shallow } from "enzyme";
test("sets isFocused correctly", () => {
const wrapper = shallow(<WrapperComponent/>
wrapper.find(ComponentToFocus).simulate("focus");
expect(wrapper.find(Sum).prop("isFocused")).toBe(true);
wrapper.find(ComponentToFocus).simulate("blur");
expect(wrapper.find(Sum).prop("isFocused")).toBe(false);
});
Why this test does not work? I tried wrapper.update() or wrap the focus and update to act(() => ...) but it didn't help and the test finishes before the state isFocused is updated in the Sum component