测试库反应模拟 function 与回调将设置 state 返回

Question

I'm new to the testing world, and I'm trying to test a component with useEffect that will execute a function that gets 3 parameters and the last one is a callback with setMyState inside:

my component:

const Component = () => {
  const [myState, setMystate] = useState({})
  useEffect(() => {
    myFunctions('string param>','<string param>', (foo) => {
    setMystat(foo)
  })
})
}

return...

I'm using '@testing-library/react' for testing. Not sure how can I render the component in the test then make sure the state got the new state set to it and the component retendered.

Answer 1

I managed to solved the issue by mocking the model with the function and a callback, and calling the callback function: on the top of the test:

jest.mock('../../../path/to/module', () => ({
//function in the module I need to call
 myFunction: {
//this will execute the function when called from the "useEffect"
//method inside the function
method : (param1, param2, callback ) => callback({item: 'item'})
 },

})

component :

const Component = () => {
const [myState, setMystate] = useState({})
useEffect(() => {
myFunctions.post('string param>','<string param>', (foo) => {
setMystat(foo)
 })

}) }

return...