Question: How to test useCallback in a functional component?

Hi,

Previously using class component method, I do the following:

describe('dummy text', () => {
  it('[onChange]: Should call handleOthers', () => {
    const wrapper = mount(<Component/>)
    const instance = wrapper.instance();
    instance.handleOthers = jest.fn();
    instance.onChange();
    expect(instance.handleOthers).toHaveBeenCalled();
})

Now I am trying the hook way(react v16.8.6), which the test above obviously breaks at instance.

const Component = memo(({a, b} => {
  const el = useRef(null)
  const [val, setVal] = useState('')
  const handleOnChange = useCallback((e)=>{
    setVal(el.current.value)
  }, [])
  const handleOthers = useCallback(()=>{}, [])
  const handleEffect = useCallback(()=>{}, [])
  useEffect(()=>{
    handleEffect()
  },[])
  return (
    <div><input ref={el} onChange={handleOnChange} /></div>
  )
}))

How to test handleOnChange,handleOthers,handleEffect respectively?

"react": "^16.8.6",
"react-dom": "^16.8.6"
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"jest": "^23.6.0",

[KiranVH]

Hey, I am trying to test useCallback as mentioned above but I don’t want to test it by creating a custom hook and installing the library is there any other way to test it normally @edwardfxiao ?

[jdnichollsc]

You can put useCallback functions in another hook and later use this library to test your code: https://github.com/testing-library/react-hooks-testing-library